text-overflow 全兼容

text-overflow 全兼容
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文件*/
}