text-overflow 这个CSS属性用于设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。比起在后台用程序截断文本再附上省略标记的做法,用CSS来处理文本溢出显然更温和(unobtrusive)一些。所以它已经被定义在
CSS 3 规范中,但目前为止,还只有 IE6+ 提供了对其的支持(
据说 Safari 1.3+ 已经支持)。
幸好,Opera 和 Firefox 都有相应的hack方法。
Opera 提供了一个 -o-text-overflow:ellipsis 来模拟CSS3中的 text-overflow:ellipsis,郭爽的Blog里有一个demo。
而Firefox,有人贡献了一个Firefox独有的XBL技术实现 -- Simulating text-overflow on Firefox with unobtrusive Javascript, 博客的作者劝大家不要再花精力去寻找其他针对Firefox的解决办法了,因为他已经花费了大量的时间都无法找到一个满意的方案。从demo 源码中可以看到如下的CSS属性定义
text-overflow:ellipsis;
-moz-binding:url("moz-text-overflow.xml#XBLDocument");
从代码中看出,这个解决方案还需要一个 xml 格式的XBL组件定义文件以及配套的一个 js 文件,其实我想也可以通过直接编写js 来实现相同的效果,不过不如标题中所说的那么 unobtrusive 而已。
最后,一个兼容主流浏览器的 text-overflow CSS 定义可能如下:
.textOverflow {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url("moz-text-overflow.xml#XBLDocument");/*配套对应的xml和js文件*/
}