CSS中text-overflow的用法

text-overflow是CSS3中的一项特性,目前处于草案阶段。最新版的W3C文档中未包含该属性。目前,大多数浏览器已经能较好地支持这一属性。

text-overflow适用于块级元素,它定义了如何处理溢出的文本以及溢出文本的显示方式。text-overflow有两个值:clip和ellipsis。从字面意思可以看出,clip即对溢出文本进行裁切;ellipsis的意思是省略号,在这里表示对溢出文本进行裁切后,显示省略号(’…’, U+2026 HORIZONTAL ELLIPSIS)。

在页面重构过程中,我们经常会遇到列表项文本过长问题。通常的处理方法是由程序判断字数,然后进行截取。我曾经写过《帝国CMS标题截取自动添加省略号的解决办法》。用这种方法的缺点是实际输出的文本是不完整的,搜索引擎抓取的话,抓到的文本就是不完整的,不利于SEO。另外,在中英文和特殊符号混排的文本中,利用字数控制有时候并不是特别可靠,不同的编码类型下,字数更加难以确定。

text-overflow有效地解决了文本溢出的处理问题。首先,它只是控制显示给用户的截取效果,而实际代码中输出的依然是完整的文本。其次,text-overflow是用定义的宽度来控制是否截取的,而非根据字数截取。这能很好地保证页面布局不被异常的文本打乱。

需要注意的是,单纯的定义text-overflow仅仅是一种注解,它还需要配合其他几个CSS属性才能实现溢出文本裁切的效果。这几个CSS属性分别是:强制文本在一行内显示(white-space:nowrap)、溢出内容为隐藏(overflow:hidden)。在IE下,还需要定义文本块的宽度。

以下代码展示了如何用text-overflow实现溢出文本截取并添加省略号的方法。

ul li {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

如果想在td 里使用此效果,需要把当前的table的样式定义为 table-layout:fixed,并为单元格Td 设置宽度,否则单元格仍然会随着字的长度变长 。

有关这一属性的浏览器兼容性,目前已经不存在太大问题。Chrome从1.0开始就支持,Firefox从7.0开始支持这一属性,Opera 9和Opera 10需要使用专属的标记-o-text-overflow来定义。IE这次倒是爽快,从6.0就开始支持。不过需要说明,建议仅在单行文本中使用这一属性,对于多行文本,各浏览器表现有一定差异。武利剑对此问题总结如下:

  1. Firefox 彻底不支持 ‘text-overflow:ellipsis’;(当时Firefox版本较低,确实尚未支持)
  2. Webkit 浏览器中,在元素只包含行内元素和文本时,’text-overflow:ellipsis’ 对其本身包含的文本及子孙元素包含的文本同样有效。当包含块级元素时,则完全失去效果;
  3. IE 对 ‘text-overflow:ellipsis’ 支持的良好,而且在 IE6 IE7 IE8(Q) 中,对其子孙元素中的文本同样有效;
  4. 在 IE8(S) 中有个特殊情况,’text-overflow:ellipsis’ 对其块级子元素内的文本没有作用;
  5. 在 Webkit 浏览器中,’:after’ 伪元素如果被设置成一个块级元素,’text-overflow:ellipsis’ 会失效。

Firefox从9.0版本开始,支持更为复杂的text-overflow值,如text-overflow: ellipsis ‘.’、text-overflow: ‘,’ clip、text-overflow: ‘,’ ‘.’等等。具体可以参考这篇文档

本文为原创,转载请注明来自 THIS IS IT - 夜色冷月,并保留原文链接

相关日志

留下足迹