CSS技术五之溢出文本显示省略号text-overflow: ellipsis

很多时候,比如网站文章列表,标题会很长,这时候列表就会换行,这时候需要让超出宽度的部分文字用省略号(…)来表示。通常做法是网站后台程序截取一定的字符然后输出到前台显示。通过CSS也实现这样的效果:
如何设置列表(li)超出部分显示省略号?
语法:

text-overflow:  ellipsis | clip

取值说明:

1、clip:表示不显示省略标记(…),而只是简单的裁切,需要在一定的高度范围内配合overflow:hidden属性使用,如果不配合的话将无任何效果;

2、ellipsis:对象文本溢出时将显示省略标记(…),需要配合overflow:hidden;white-space:nowrap一起使用才会有效果。
完整代码示例

p {
  white-space: nowrap;
  width: 100%;                   /* IE6 needs any width */
  overflow: hidden;              /* "overflow" value must be different from "visible" */ 

  -o-text-overflow: ellipsis;    /* Opera 9-10 */
  text-overflow:    ellipsis;    /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
}

浏览器支持:

Browser Lowest version Support of
Internet Explorer 6.0 text-overflow ellipsis | clip
Firefox (Gecko) 7.0 (7.0) text-overflow ellipsis | clip
Opera (Presto) 9.0 (2.0) -o-text-overflow ellipsis | clip
11.0 (2.7) text-overflow ellipsis | clip
Safari | Chrome | WebKit 1.3 | 1.0 | 312.3 text-overflow ellipsis | clip

示例:
使用样式前:

CSS技术五之溢出文本显示省略号text-overflow: ellipsis;

使用样式后:

CSS技术五之溢出文本显示省略号text-overflow: ellipsis;

说明:
text-overflow:clip所有浏览器都支持,但是text-overflow:ellipsis只有Firefox不支持,但有一些方法可以兼容解决这个问题,比如 :after,图片,jQuery Text Overflow Plugin,XUL方式,总之在Firefox7以下实现是比较复杂的,而在最新的Firefox7 beta5 中提供了该语法支持,有望在今后得到统一。

发表评论

电子邮件地址不会被公开。 必填项已用*标注