text-overflow ： clip | ellipsis
标签：style blog http color io os 使用 ar strong
参考学习：http://www.cnblogs.com/lianjun/archive/2011/03/24/1993479.html
项目中最初的做法（js截取）：
//字符长度截取包括中英文混合 function subStr(str, len) { str = str.toString(); var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chineseRegex,"**").length; for(var i = 0;i < strLength;i++) { singleChar = str.charAt(i).toString(); if(singleChar.match(chineseRegex) != null) { newLength += 2; }else { newLength++; } if(newLength > len) { break; } newStr += singleChar; } if(strLength > len) { newStr += "..."; } return newStr; }
但发现无意中发现css居然有根据容器宽度自动截取长度加省略号功能，而且无需再次调用js方法去截取字符串。特别在数据比较多的table中，对每行中的列都要调用js方法，会导致页面加载时间，影响系统性能，导致用户体验不够。但会增加一点服务器流量。可以根据情况衡量使用。
text-overflow ： clip | ellipsis
关于text-overflow属性如何应用，我们作如下的说明讲解：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:200px; （标注容器的宽度）
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。
在Div中的方法
<DIV STYLE="width: 200px; border: 1px dashed red; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就a是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就1是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就F是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就是 Like You Pig Very Very Very Much.</NOBR>
</DIV>
在Table中的方法
<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666>
<TR>
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</TD>
</TR>
</TABLE>
示例：
<!DOCTYPE html> <html> <head> <title>text-overflow demo</title> <meta charset=utf-8" /> <style> .test_demo_clip { text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc; } .test_demo_ellipsis { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc; } </style> </head> <body> <h2>text-overflow : clip </h2> <div class="test_demo_clip"> 不显示省略标记，而是简单的裁切条 </div> <h2>text-overflow : ellipsis </h2> <div class="test_demo_ellipsis"> 当对象内文本溢出时显示省略标记 </div> </body> </html>
演示结果：
标签：style blog http color io os 使用 ar strong
原文地址：http://www.cnblogs.com/zzgno1/p/3987898.html
