截取長文本，顯示省略號（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>

 

當然英文和數字混排和1、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，剩余的中文、數字、英文情況就和1、2、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.中英文或者中文數字混排則和3、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>  

以上純屬個人結論，如有疑問或者錯誤歡迎拍磚！

 

以后有機會和大家嘮嗑嘮嗑jquery選擇器方面的一些經驗...