截取长文本，显示省略号（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选择器方面的一些经验...

来源：https://www.cnblogs.com/web-lexi/p/3574609.html

标签

text-overflow

table