幸好,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文件*/
}
近期评论