css3笔记——text-overflow属性

css3新增了text-overflow属性,应用场景多是处理单行的文本省略,仅仅用来决定文本溢出时候是否显示省略号。

具体的用法为:text-overflow:clip | ellipsis | ellipsis-word

  • clip表示不显示省略标记
  • ellipsis表示当对象内文本溢出时显示省略号,省略标记插入最后一个字符
  • ellipsis-word也是显示省略号,但是省略标记插入最后一个词。(demo中经过实验,浏览器表现与clip一样)

需要注意的事,省略号的显示还得需要white-space:nowrap和overflow:hidden属性的配合,如下面demo所用css代码:

.clip, .ellipsis, .ellipsisword { overflow:hidden; white-space:nowrap; width:100px; background:red; } .clip { text-overflow:clip; } .ellipsis { text-overflow:ellipsis; } .ellipsisword { text-overflow:ellipsis-word; }

值得注意的是,text-overflow属性clip和ellipsis在ie下表现都很好,除去较低版本ff支持不好,较新的浏览器都支持,因此在代码的过程中不妨一用。

demo在浏览器表现:

[![text-overflow](http://hicdn.qiniudn.com/wp-content/uploads/2012/09/text-overflow.jpg "text-overflow")](http://hicdn.qiniudn.com/wp-content/uploads/2012/09/text-overflow.jpg)text-overflow

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus