截取长文本，显示省略号（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>