小熊泡泡

常用链接

统计

最新评论

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文件*/
}

posted on 2006-07-08 22:39 小熊泡泡 阅读(298) 评论(1)  编辑  收藏 所属分类: html-css

评论

# re: text-overflow 全兼容 (转载) 2013-05-07 13:49 萨提亚

原来是这样的  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: