截取長文本，顯示省略號（text-overflow:ellipsis）

今天作項目有這麼個需求（截取過長的文本內容，顯示成省略號形式）因而想到了text-overflow：ellipsis，但記憶中好像這個有兼容性問題，就帶着疑惑查閱了些資料，但發現資料都是一兩年前的，都說有兼容性問題，貌似符合當年的記憶。心想很差，難道又要依靠js嗎，這多多少少會損耗掉一些性能啊，帶着疑慮和不甘本身來驗證一番，畢竟過了幾年了，這個css3的屬性難道現代瀏覽器還不全支持嗎？萬惡的ie都一直支持的，這太不符合規律了。因而通過一系列驗證，我得出text-overflow：ellipsis現在各大瀏覽器已完美支持（若有錯誤還請指出）

截取過長的文本內容，顯示成省略號須要text-overflow：ellipsis加上一系列其餘屬性才能實現，下面分狀況來講明：

1.div p li等塊元素中若是全是數字則只須要text-overflow：ellipsis配上width和overflow：hidden就能實現...

example:

<div style=" width:50px; text-overflow:ellipsis; overflow:hidden;">1111111111111111111111111111111111</div>

2.div p li等塊元素中若是全是英文則只須要text-overflow：ellipsis配上width和overflow：hidden就能實現...

example:

 

<div style=" width:50px; text-overflow:ellipsis; overflow:hidden;">babybabybabybabybabybabybabybabybabybabybabybaby</div>

 

3.div p li等塊元素中若是全是中文則須要text-overflow：ellipsis配上width和overflow：hidden white-space:nowrap才能實現...

 

example:

 

<div style=" width:50px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">我愛寶貝瑩我愛寶貝瑩我愛寶貝瑩我愛寶貝瑩我愛寶貝瑩</div>

 

固然英文和數字混排和一、2種狀況同樣

若是是table，td裏想實現這種效果也分幾種狀況，必要條件就是table得設table-layout:fixed

4.td直接包含中文，那table還必須有width，td須要text-overflow：ellipsis配上overflow：hidden white-space:nowrap

example:

<table style="table-layout:fixed" width="120"> <tr><td style=" text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">我愛寶貝瑩我愛寶貝瑩我愛寶貝瑩我愛寶貝瑩我愛寶貝瑩</td></tr> </table>

5.td包含數字或英文或數字英文混排，那table也還必須有width，td須要text-overflow：ellipsis和overflow：hidden

example:

 

<table style="table-layout:fixed" width="50"> <tr><td style=" text-overflow:ellipsis; overflow:hidden;">11111111111111111111111111111</td></tr> </table>

 

6.td裏嵌套div p li等塊狀元素，則table不須要width和table-layout:fixed，但塊狀元素得有width，剩餘的中文、數字、英文狀況就和一、二、3相同了

example:

<table> <tr><td><div style=" width:50px; text-overflow:ellipsis; overflow:hidden;">11111111111111111111111111111</div></td></tr> </table> <table> <tr><td><div style=" width:50px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;">我愛寶貝瑩我愛寶貝瑩我愛寶貝瑩我愛寶貝瑩我愛寶貝瑩</div></td></tr> </table>

7.中英文或者中文數字混排則和三、4狀況相同

最後送上一段對以上依然不肯定的同窗一段jquery代碼(一樣能夠實現相同功能)

//頁面加載以後,設置.樣式.  $(function(){ //使用id選擇器;例如:tab對象->tr->td對象. //$("#high_light").find("tr").find("td")性能優於$("#high_light tr td")  $("#high_light").find("tr").find("td").each(function(i){ //獲取td當前對象的文本,若是長度大於25;  if($(this).text().length>25){ //給td設置title屬性,而且設置td的完整值.給title屬性.  $(this).attr("title",$(this).text()); //獲取td的值,進行截取。賦值給text變量保存.  var text=$(this).text().substring(0,25)+"..."; //從新爲td賦值;  $(this).text(text); } }); }); 

<table id="high_light"> <tr> <td> 這是很長的一段文本內容,測試是否能正常截取.這是很長的一段文本內容,測試是否能正常截取.這是很長的一段文本內容,測試是否能正常截取.這是很長的一段文本內容,測試是否能正常截取. </td> <td> 這是很長的一段文本內容,測試是否能正常截取.這是很長的一段文本內容,測試是否能正常截取.這是很長的一段文本內容,測試是否能正常截取.這是很長的一段文本內容,測試是否能正常截取. </td> <td> 這是很長的一段文本內容,測試是否能正常截取.這是很長的一段文本內容,測試是否能正常截取.這是很長的一段文本內容,測試是否能正常截取.這是很長的一段文本內容,測試是否能正常截取. </td> </tr> </table>