今天做项目有这么个需求（截取过长的文本内容，显示成省略号形式）于是想到了text-overflow：ellipsis，但记忆中好像这个有兼容性问题，就带着疑惑查阅了些资料，但发现资料都是一两年前的，都说有兼容性问题，貌似符合当年的记忆。心想不好，难道又要依靠js吗，这多多少少会损耗掉一些性能啊，带着疑虑和不甘自己来验证一番，毕竟过了几年了，这个css3的属性难道现代浏览器还不全支持吗？万恶的ie都一直支持的，这太不符合规律了。于是经过一系列验证，我得出text-overflow：ellipsis如今各大浏览器已完美支持（如有错误还请指出）
截取过长的文本内容，显示成省略号需要text-overflow：ellipsis加上一系列其他属性才能实现，下面分情况来说明：
1.div p li等块元素中如果全是数字则只需要text-overflow：ellipsis配上width和overflow：hidden就能实现...
example:
2.div p li等块元素中如果全是英文则只需要text-overflow：ellipsis配上width和overflow：hidden就能实现...
example:
3.div p li等块元素中如果全是中文则需要text-overflow：ellipsis配上width和overflow：hidden white-space:nowrap才能实现...
example:
当然英文和数字混排和1、2种情况一样
如果是table，td里想实现这种效果也分几种情况，必要条件就是table得设table-layout:fixed
4.td直接包含中文，那table还必须有width，td需要text-overflow：ellipsis配上overflow：hidden white-space:nowrap
example:
5.td包含数字或英文或数字英文混排，那table也还必须有width，td需要text-overflow：ellipsis和overflow：hidden
example:
6.td里嵌套div p li等块状元素，则table不需要width和table-layout:fixed，但块状元素得有width，剩余的中文、数字、英文情况就和1、2、3相同了
example:
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); } }); }); | 这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取. | 这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取. | 这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取.这是很长的一段文本内容,测试是否能正常截取. |