// 關於多行文字點點點…顯示見文末
前言：
在實際的項目中，由於文字內容的長度不確定性和頁面佈局的固定性，難免會出現文字內容超過div（或其他標籤，下同）區域的情況，此時比較好的做法就是當文字超過限定的div寬度後自動以省略號（…）顯示，這樣，按照習慣，人們都會知道這兒有文字被省略了。css中有個屬性叫做text-overflow:ellipsis;配合其他一些屬性可以實現IE,chrome,safria瀏覽器下文字溢出點點點省略號顯示，在加上opera瀏覽器的私有屬性-o-text-overflow:ellipsis;就目前而言，可以實現Firefox瀏覽器以外的所有主流瀏覽器的文字溢出點點點省略號顯示。
而本文將提供多種兼容性上佳的文字溢出點點點省略號顯示的方法，而裏面不少方法就是自己想出來的。有使用外部輔助文件的，有純粹的css方法的，還有使用jQuery方法的。每種方法都提供各個瀏覽器下的截圖驗證，提供實例頁面，提供部分源文件，都是值得信賴的方法，希望對您有所幫助。文章中穿插了些牢騷，您可以跳過，與本文主體不是很相關。
您可以事先單擊這裏：本文各類方法的demo實例頁面，兩個頁面對比或許更有助於理解和認識。
目錄：
1、常規css方法——使Firefox以外主流瀏覽器文字溢出省略號表示
2、使用ellipsis.xml文件使Firefox支持文字溢出後點點點省略號表示
3、我對網上些文章和網站的不滿
4、我自己想出來的方法——margin負值定位法
5、jQuery限制字符字數的方法
6、jQuery自動判斷寬度是否超出的方法
1、常規css方法——使Firefox以外主流瀏覽器文字溢出省略號表示
下圖爲此常用方法在各個瀏覽器下的表現：
IE6瀏覽器下
IE7瀏覽器下
chrome谷歌瀏覽器下
Safari瀏覽器下
opera瀏覽器下
Firefox火狐瀏覽器下
可以看到，僅在Firefox火狐瀏覽器下無法實現文字溢出省略號表示，其文字直接從中間咔掉了。綜合考慮代碼成本，表現效果，我個人覺得這樣子已經算是不錯的了，追求完美和實際效益之間要追求一定的平衡。如果頁面上很多文字都溢出，則需要尋求更兼容的方法，要是偶爾會出現文字溢出的情況，就是用這類css代碼就足夠了，單層標籤，簡單實用：
.zxx_text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}2、使用ellipsis.xml文件使Firefox支持文字溢出後點點點省略號表示
這是老外提供的一種方法，使用Firefox的私有屬性調用一個XML文件，可以使Firefox火狐瀏覽器下文字溢出後以省略號的形式顯示。
右鍵另存爲下載：ellipsis.xml
調用方法如下：-moz-binding:url(‘ellipsis.xml#ellipsis’);跟css樣式寫法一致。
需要注意的是：此XML文件不支持向上路徑的訪問，也不支持絕對路徑的訪問。也就是說此XML文件需要放在調用文件（css文件，或HTML文件）的同目錄下或下一級目錄下，不能向上訪問。原因我是不清楚的，我反覆試驗，都證明如此。
下圖爲使用此XML文件後Firefox瀏覽器下的表現：
Firefox火狐瀏覽器下
可以清除地看到溢出的文字部分用點點點省略號表示了。再結合上面的css樣式，就可以實現所有主流瀏覽器下的單行文字溢出用省略號表示了。css表示如下：
.zxx_text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;}例如在實例頁面中，此段css是寫在頁面上的，所以ellipsis.xml文件是放在HTML文件同目錄下的。
3、我對網上些文章和網站的不滿
昨天編寫demo實例頁面，想找之前看過的一個同仁提過的圖片顯示省略號的方法，結果發現很多打着稱號兼容“IE，FF”的文章，不錯啊，於是我看看是什麼方法。結果一肚子的火。
所謂的兼容IE，FF的文章
圖中顯示的是Google搜索後的前五項，其中有四個是所謂的建站教程網站，這四個又是同一篇文章。
這篇文章很不負責，居然是我很久之前就想過且測過，由於兼容性等等問題而不採用的方法。用:after僞類和content在文字後面加省略號。這個方法可以說是完全行不通。
首先，標題就是個大大的錯誤，什麼兼容“IE，FF”？第一、chrome不算瀏覽器嗎？看這文章時間，chrome已經出來了，Safari，opera不算瀏覽器嗎？就只要兼容IE，FF就可以了嗎？第二、你兼容IE，FF嗎？什麼叫兼容，就是要表現一樣。兩個瀏覽器下表現一致嗎？差遠了！第三、你兼容IE嗎？IE6和IE7下都天差地別的，還說什麼兼容呢！
看這文章的意思，這世界上就只有兩種瀏覽器，IE6和Firefox，我不知道作者是個很大的草包還是上世紀時空轉移過來的程序員，用句赤壁裏的話說就是“你過時了！”
其次，方法缺陷很多：1、說是兼容，其實反而大大破壞了兼容性，IE6和IE7下的表現就不一樣，一句IE“不支持max-width”就讓我想給作者扇個耳光，IE7不支持嗎，別告訴我你寫這文章時還沒有IE7瀏覽器。2、本來chrome瀏覽器，Safari還有opera可以實現文字溢出省略號顯示的，現在受限與:after和content，就會一處理不當，文字直接被截，就很醜了。3、多套用了一層標籤，css也多了好幾行，沒有必要，資源消耗高。4、當文字很短時後面也還跟着個省略號，沒有溢出爲什麼還要顯示省略號呢？
無論是兼容性，資源佔用，邏輯表現都是很屎的，是個完全不能用的方法。
我不是憤慨作者技術不行，而是不滿沒有一點道義和科研素養。睜着眼睛說瞎話，都是沒有經過驗證的東西，憑感覺大放厥詞。我更鄙視那些所謂的教程網站，這些網站什麼教程都拿來的，它只管點擊率，不管是否正確實用，n年前淘汰的東西它也拿來，誤人子弟啊！我就很納悶，這些網站無論設計，還是佈局，或是頁面的兼容性都差的跟坨醞釀很久的豬屎一樣，還教別人怎麼做網站。我是看穿了，其實這篇文章不行他們是知道的，可以沒有辦法啊，“兼容IE，FF”，多誘人的關鍵詞啊！不管怎樣，得拿篇文章來佔住這幾個關鍵詞啊！流量給了別人可不行啊！這些唯利是圖的網站，將一篇完全不行的文章傳來傳去，就爲了點破點擊率。這跟三鹿有什麼區別，做教程的，是教人的，隨便拿一些錯誤的東西糊弄人，害了多少人啊，真是太沒有道義了！
4、我自己想出來的方法——margin負值定位法
這裏先上代碼，HTML部分：
<div class="zxx_text_overflow" > <div class="zxx_con" >這是一段比較長的文字，用來測試是否文字溢出時會用省略號顯示。</div> <div class="zxx_dotted" >…</div> </div>
css部分：
.zxx_text_overflow{width:24em; height:1.3em; overflow:hidden; zoom:1;}
.zxx_text_overflow .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;}
.zxx_text_overflow .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;}結果在不同瀏覽器下的表現如下（IE6，IE7以IE6示例，Firefox和chrome以Firefox示例）：
IE6下，IE7同類型，表現一致
Firefox瀏覽器下表現
opera瀏覽器下表現
Safari瀏覽器下表現
簡要說明：此方法兼容IE6，IE7（IE8未測過），Firefox，chrome，Safari，opera瀏覽器。沒有hack，沒有生僻的css樣式。文字短時，沒有省略號，文字溢出時就出現省略號。可以說是相當不錯的一個方法。原理也很簡單：當文字內容足夠長時就把隱藏在上面的省略號層給擠下來了。關鍵就是點點點所在div層的高度的絕對值要比其margin的絕對值大那麼一點點。 如果您不習慣用em做單位，直接換作px就可以了，效果是一樣的。
5、jQuery限制字符字數的方法
代碼很簡單，使用也很方便，如下：
$(document).ready(function(){
//限制字符個數
$(“.zxx_text_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+’…’);
}
});
});
所產生的結果是：頁面中class爲“zxx_text_overflow”的標籤內部字符的個數將最多顯示23個，如果原本字符個數大於23，則會在後面添加點點點省略號（…），如下圖所示的：
jQuery限制字符個數實現溢出省略號表示
6、jQuery自動判斷寬度是否超出的方法
相比較前面一種方法，這個js實現的方法更加智能些（也更佔用資源），通過複製節點（就是需要判斷是否文字溢出省略號顯示的標籤層），獲取其寬度，再判斷其寬度是否大於樣式中給定的寬度限值，大於則去掉尾部字符，添加省略號，循環，直到複製的層的寬度小於css給定值。
js代碼如下：
//by zhangxinxu
var wordLimit=function(){
$(“.zxx_text_overflow”).each(function(){
var copyThis = $(this.cloneNode(true)).hide().css({
‘position': ‘absolute’,
‘width': ‘auto’,
‘overflow': ‘visible’
});
$(this).after(copyThis);
if(copyThis.width()>$(this).width()){
$(this).text($(this).text().substring(0,$(this).html().length-4));
$(this).html($(this).html()+’…’);
copyThis.remove();
wordLimit();
}else{
copyThis.remove(); //清除複製
return;
}
});
}
wordLimit();
css部分需要給定一個寬度值，例如：.zxx_text_overflow{width:400px;}
結果如下：
jQuery寬度判定實現溢出省略號表示
狠狠地點擊這裏：本文各類方法的demo實例頁面
最後補充：
我抽了一會兒時間把上面兩個jQuery的方法結合起來，寫了個小小的jQuery插件，方便對jQuery感興趣的人直接使用了。
這個單行文字溢出用點點點省略號顯示的jQuery插件的使用很簡單。例如：
$(“.test1″).wordLimit(); 自動獲取css寬度進行處理，如果css中未對.test1給定寬度，則不起作用
$(“.test2″).wordLimit(24); 截取字符數，值爲大於0的整數，這裏表示class爲test2的標籤內字符數最多24個
$.wordLimit();裏面爲空則根據寬度自動截取，有值的話就按照字符數進行截取了。
此插件js下載（右鍵，另存爲）
源文件打包下載(zip 18.6K)
狠狠地點擊這裏：文字溢出省略號顯示jQuery插件使用demo實例頁面
結語：
css，js等前端技術博大精深，肯定還有其他更好的解決方法，這裏只是把我所知道的寫下來，希望對其他人有所幫助。技術的進步是永不停息的，或許一兩年後，我的這個文章裏所提到的些方法會成爲過時的東西的。希望如此！
更新於2010-04-16
有不少同行詢問當含有a標籤鏈接的時候如何解決點點點顯示的問題，在本文的評論9，我提出瞭解決方案，您要是遇到同樣的問題，可以在評論9處查看。
更新於2013-04-22
早在去年，所有瀏覽器都已經支持text-overflow:ellipsis;方法，因此，本文很多內容out了！
更新於2015-10-08
對於現代瀏覽器，例如webkit內核的瀏覽器，或者移動端，是可以實現多行文本內容超出點點點…最後一行顯示的，典型的CSS組合如下：
.box {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}其中-webkit-line-clamp就是控制行數的，是3就是顯示3行，3行結束點點點，如果是2則最多2行。
您可以狠狠地點擊這裏：多行文字溢出點點點…顯示demo
你就會看到你想要的！
原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=230