看到这个标题很容易就会想到截断文字加“...”的做法。哈哈,就是这样。其实写这篇日志也只是把这样方法做个记录,因为好像写了这么多次,还是会不太记得。嘿嘿~~
一般的文字截断(适用于内联与块):
==============CSS================
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
=================================
对于表格的话,定义有一点不一样:
==============CSS================
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
=================================
注:这个东东只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,其它的浏览器文本超出指定宽度时会隐藏。
“好久没有更新blog了”发现每次一写日志,都少不了这一句。交互设计现在也成了一个热门词,到哪都总能听到交互这交互那的,当然工作上也少不了接触到交互。每每跟臭鱼聊到交互,总会提到“以目标为导向”的交互设计——以用户的目标为设计的主导,任务越少越好。貌似是怎么说的。
有个例子:“比如有一个人想从A地到B地去,古时候是要几个任务要做:
而现在如果也是要从A地到B地去,所要做的任务就不一样了:
虽然是完全不同的任务,但目标是一样的:从A地到B地。如果有个人帮你把这些任务提前给你安排了,那会不会更爽呢?当然!交互所要做的就是帮你把这些任务给你安排好,让你更快的到达目地地。”
听起来好像没错,但仔细想想,你会发现任务还是要做,交互所要做的不是帮用户把任务做了,而是让用户更顺利的完成必须要完成的任务。
学交互的同学应该都知道“别让我思考——Krug可用性第一定律”、“……设计者应该尽量做到,当我看一个页面时,它应该是不言而喻,一目了然,自我解释的。我应该能明白它――它是什么意思,怎样用它――而不需要进行额外的思考。……”当然不可能完全做到这种页面,过多的提示只会让用户有被当成“白痴”的感觉。所以整站统一的设计,能让用户更容易形成心理模型,更容易的自我帮助。
“自我解释” 在对于提高页面友好度是很有帮助的,特别是当用户需要完成一些操作的时候,如链接、按钮等操作。一个不知道结果的操作,对于用户来说,都有一定的“恐惧感”,点了之后会出现什么呢?最简单的一个例子,关于链接的:大家都知道链接可以打开新窗口,也可以在当前窗口跳转。当一个链接没有说明是否在新窗口打开时,用户对于要不要点这个链接,总会犹豫,因为不知会不会将当前页面的内容覆盖。观查下身边使用电脑的朋友打开网页的习惯(特别是找资料的时候),你会发现一个很奇怪的现象:有大部分的人会在链接上点右键,然后选“在新窗口打开...”,也有人会按着Ctrl键直接点链接(在新窗口打开链接),为什么呢?因为不用去担心会不会把当前窗口覆盖(-_-||我就喜欢在新窗口打开,不行啊?……)。
OK,其实只是想说明一点:让用户知道自己在哪、将会去到哪。
在BLOGBUS建了个群组——CSS森林,欢迎各位同行加入,分享下经验、技巧。
群组:http://groups.blogbus.com/cssforest.html
CSS森林(QQ群:30247792) 欢迎走 Web 标准之路,玩CSS的朋友加入。精神正常者慎入!
记念俺学标准一年了,同时也记念这个Blog三周岁的生日(貌似已经过了-_-||)给个“裸体”示众。
谢谢每一个关心我、帮助我、支持我的同学、同行……
IE条件注释很多人都知道了,今天才知道,原来它也可以对非IE的浏览器起作用。嘿嘿,想知道吧。
我们所认识的IE条件注释是这样的:
==============HTML===============
<!--[if IE]> IE的内容<![endif]-->
=================================
看这个了解一下:IE条件注释参考
如果是非IE的浏览器,会把这一段也当成一个注释,当然也就不会起作用了。所以要这样写:
==============HTML===============
<!–[if IE]><![if !IE]><![endif]–> 非IE可见 <!–[if IE]><![endif]><![endif]–>
=================================
这样非IE的浏览器就可以读到里面的内容,而IE则因为里面的条件为真而不显示内容。
例子在这:猜猜你用的浏览器是?