CSS文本溢出省略號(hào)：text-overflow:ellipsis及firefox兼容詳解
溢出文本顯示省略號(hào),text-overflow:ellipsis
這個(gè)標(biāo)題其實(shí)已經(jīng)是一個(gè)老生常談的問(wèn)題了。很多時(shí)候，比如網(wǎng)站最基本的文章列表，標(biāo)題會(huì)很長(zhǎng)，而顯示列表的區(qū)域?qū)挾葏s沒(méi)有這么寬，這時(shí)候最正常的做法就是讓超出寬度的部分文字用省略號(hào)(…)來(lái)表示。通常做法是網(wǎng)站后臺(tái)程序截取一定的字符然后輸出到前臺(tái)顯示或者前臺(tái)用javascript截取一定的字符，但是通過(guò)控制字?jǐn)?shù)來(lái)截取的話還是存在一個(gè)大問(wèn)題的，因?yàn)橹形暮陀⑽牡淖址麑挾葐?wèn)題，這個(gè)字?jǐn)?shù)不好控制，而且通用性較差。那么有沒(méi)有更好的方法呢，比如直接用 CSS來(lái)解決的，當(dāng)然是有的。
text-overflow是一個(gè)比較特殊的屬性，W3C早前的文檔中（目前的文檔中沒(méi)有包含text-overflow屬性，F(xiàn)ML!）對(duì)其的定義是:
Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word
clip : 不顯示省略標(biāo)記（…），而是簡(jiǎn)單的裁切
ellipsis : 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…），省略標(biāo)記插入的位置是最后一個(gè)字符。
ellipsis-word : 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…），省略標(biāo)記插入的位置是最后一個(gè)詞（word）。
至于為什么一開始我說(shuō)text-overflow是一個(gè)比較特殊的樣式呢？因?yàn)槲覀兛梢杂盟嫖覀兺ǔＫ玫臉?biāo)題截取函數(shù)，而且這樣做對(duì)搜索引擎更加友好，如：標(biāo)題文件有50個(gè)漢字，而我們的列表可能只有300px的寬度。如果用標(biāo)題截取函數(shù)，則標(biāo)題不是完整的，如果我們用CSS樣式text- overflow:ellipsis，輸出的標(biāo)題是完整的，只是受容器大小的局限不顯示出來(lái)罷了（表現(xiàn)上是超出部分顯示省略標(biāo)記…）。
text-overflow: ellipsis屬性僅是注解，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記。并不具備其它的樣式屬性定義。我們想要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果。還必須定義：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）。只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。
參考資料：http://www./article.asp?id=602
那么，如果我們要給p標(biāo)簽定義text-overflow:ellipsis就可以這么寫：
1. p {
2. white-space: nowrap;
3. width: 100%; /* IE6 需要定義寬度 */
4. overflow: hidden;
5.
6. -o-text-overflow: ellipsis; /* Opera */
7. text-overflow: ellipsis; /* IE, Safari (WebKit) */
8. }
9.
使用樣式前：
使用樣式后：
瀏覽器兼容狀況
Browser Lowest Version Support of
Internet Explorer 6.0 text-overflow
Firefox (Gecko) — —
Opera 9.0 -o-text-overflow
Safari (WebKit) 1.3 (312.3) text-overflow
Firefox不支持這個(gè)屬性！這回，F(xiàn)irefox你也太另類了吧！還有別的辦法么，當(dāng)然有，方法還挺多的。
比如Mozilla developer center推薦的-moz-binding CSS屬性。Mozilla developer center給出的理由是text-overflow沒(méi)有W3C的規(guī)范…但是因?yàn)镕irefox支持XUL，一種XML的用戶界面語(yǔ)言。并且 Firefox還支持XBL，一種XML綁定語(yǔ)言，這樣我們就可以使用Mozilla developer center推薦的-moz-binding CSS屬性來(lái)綁定XUL里的ellipsis屬性了。
1.XUL方式
首先，我們創(chuàng)建XUL，它應(yīng)該被保存為ellipsis.xml：
1. <?xml version="1.0"?>
2. <bindings
3. xmlns="http://www.mozilla.org/xbl"
4. xmlns:xbl="http://www.mozilla.org/xbl"
5. xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
6. >
7. <binding id="ellipsis">
8. <content>
9. <xul:window>
10. <xul:description crop="end" xbl:inherits="value=xbl:text"><children/>
11. </xul:description>
12. </xul:window>
13. </content>
14. </binding>
15. </bindings>
然后我們需要把這個(gè)xml文件放到一個(gè)目錄，原來(lái)的css需要加一條，變成這樣
1. p {
2. white-space: nowrap;
3. width: 100%; /* IE6 需要定義寬度 */
4. overflow: hidden;
5.
6. -o-text-overflow: ellipsis; /* Opera */
7. text-overflow: ellipsis; /* IE, Safari (WebKit) */
8. -moz-binding: url('ellipsis.xml#ellipsis'); /* Firefox */
9. }
雖然Firefox通過(guò)XUL的方式實(shí)現(xiàn)了ellipsis，但是還是需要注意以下這些問(wèn)題：
1.經(jīng)過(guò)XUL處理過(guò)的文本你將不能被選中，按理說(shuō)-moz-user-select: text; 屬性將允許文本被選中，但是我沒(méi)有試驗(yàn)成功。
2.如果你給父元素綁定了XUL，那么子元素的內(nèi)容將變得不可見。例如：
如果你只是給p節(jié)點(diǎn)綁定了XUL，那么在Firefox下你將看不到haha這個(gè)內(nèi)容。
它的源代碼實(shí)際上是：
1. <p>It is a long<em> haha</em> long long long long text!</p>
參考資料:
http://www./TR/2003/CR-css3-text-20030514/
http://www./css/contents.html
https://bugzilla.mozilla.org/show_bug.cgi?id=312156
https://developer.mozilla.org/En/XUL
https://developer.mozilla.org/En/XUL/Description
http://www./thoughts/2008/6/
http://www./TR/xbl/
http://www./TR/css3-text/
2.Javascript方式
既然XUL無(wú)法完美解決Firefox下文字溢出顯示…，那么我們就求助javascript吧，當(dāng)然，并不是古老的截取一定數(shù)目的字符來(lái)實(shí)現(xiàn)。
這里以jQuery為例，代碼如下：
1. (function($) {
2. $.fn.ellipsis = function(enableUpdating){
3. var s = document.documentElement.style;
4. if (!('textOverflow' in s || 'OTextOverflow' in s)) {
5. return this.each(function(){
6. var el = $(this);
7. if(el.css("overflow") == "hidden"){
8. var originalText = el.html();
9. var w = el.width();
10.
11. var t = $(this.cloneNode(true)).hide().css({
12. 'position': 'absolute',
13. 'width': 'auto',
14. 'overflow': 'visible',
15. 'max-width': 'inherit'
16. });
17. el.after(t);
18.
19. var text = originalText;
20. while(text.length > 0 && t.width() > el.width()){
21. text = text.substr(0, text.length - 1);
22. t.html(text + "...");
23. }
24. el.html(t.html());
25.
26. t.remove();
27.
28. if(enableUpdating == true){
29. var oldW = el.width();
30. setInterval(function(){
31. if(el.width() != oldW){
32. oldW = el.width();
33. el.html(originalText);
34. el.ellipsis();
35. }
36. }, 200);
37. }
38. }
39. });
40. } else return this;
41. };
42. })(jQuery);
這段js的原理很簡(jiǎn)單，就是通過(guò)不斷的比較寬度值，然后逐個(gè)縮短字符寬度，當(dāng)最后寬度合適的時(shí)候，停止循環(huán)，就實(shí)現(xiàn)了文字溢出顯示…的效果。
這段js還需要一段css來(lái)配合。
1. .overflow {
2. text-overflow: ellipsis;
3. -o-text-overflow: ellipsis;
4. white-space: nowrap;
5. overflow: hidden;
6. }
js里有個(gè)判斷就是當(dāng)樣式里出現(xiàn)text-overflow或者-o-text-overflow的時(shí)候，便不會(huì)執(zhí)行這段js。因?yàn)橹С诌@兩個(gè)屬性的瀏覽器可以自己實(shí)現(xiàn)ellipsis效果。
這兩種方法都可以實(shí)現(xiàn)Firefox下ellipsis的效果，如何取舍使用，具體還得根據(jù)你要運(yùn)用到的項(xiàng)目的具體情況來(lái)具體分析，XUL實(shí)現(xiàn)的方法的不足之處在以上已經(jīng)很詳盡地列舉了，如果你可以避免或者說(shuō)這些無(wú)關(guān)你項(xiàng)目的大問(wèn)題，那么XUL不失一個(gè)好方法。
至于其他的一些方法你可能在網(wǎng)上也有看到，比如用:after偽類來(lái)實(shí)現(xiàn)等，個(gè)人不推薦，所以我這里也不細(xì)說(shuō)了。
原文地址：http:///css/201011/16_407.html
