截取长文本，显示省略号（text-overflow:ellipsis）

2019独角兽企业重金招聘Python工程师标准>>>

今天做项目有这么个需求（截取过长的文本内容，显示成省略号形式）于是想到了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>

转载于:https://my.oschina.net/openoschina/blog/367444