text-overflow 全兼容 (轉載)
text-overflow 這個CSS屬性用于設置或檢索是否使用一個省略標記(...)標示對象內文本的溢出。比起在后臺用程序截斷文本再附上省略標記的做法,用CSS來處理文本溢出顯然更溫和(unobtrusive)一些。所以它已經被定義在

幸好,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 小熊泡泡 閱讀(303) 評論(1) 編輯 收藏 所屬分類: html-css