Web页面上，有些组件的文字显示长度是需要控制的，例如表格中单元格内的文字宽度，label的文字宽度等。比如单元格的宽度是50px，假设文字内容宽度是80，这样就是把表格撑开，并且会换行，导致页面布局错乱。面对这种情况，通常是通过禁止换行并分割文字，隐藏文字实现控制。
通用的方法是通过css来控制，主要涉及到三个属性：overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 就可以实现，结果是组件上会部分显示文字，超出的部分，以省略号的形式显示。为了用户能看到全部的文字，一般会在组件的title属性中填写要显示的全部文字。
上述的方法可以解决大多数的文字显示不开的问题，但是有时候，浏览器并不一定会支持上述的显示，例如IE10下，文字虽然会被分割，但是不显示省略号，或者IE10下，由于某些原因，干脆就完全没有效果，这个时候，就该考虑另一种方法了：
通过js实现这种控制，并且要对所有的同类型组件起到相同控制。方法如下：首先获取所有同类型组件，然后遍历组件获取值，判断这个值的长度是否超过设置的宽度，超过则截取，并重新按照我们自己设定的内容赋值，不超过则正常显示。这样就实现了文字显示的控制，并且这种js实现的方式，兼容性会相对好一点。为了实现全局控制，需要把这个操作代码放入到共用的js中。
上述的结果和代码如下所示：
图1 未处理，这里是两个label
图 2 处理后的效果
css代码：
label {
60px;
display:block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
js代码：
公共的js中
$(function() {
/*处理label显示问题，超出宽度，裁剪，并省略号，其他组件文字显示问题一样*/
$("label") .each(function(){
var labelval= $(this).text() ;
if(labelval.length>3){
$(this).text(labelval.substring(0,3)+"...");
}
});
/*处理表格显示问题，超出宽度，裁剪，并省略号*/
var td_length=$('.table td').length;
for(var n=0;n<td_length;n++){
var tdContent = $('.table td:eq('+n+')').html();
if(tdContent.length>20){
tdContent = tdContent.substring(0,20)+"...";
$('.table td:eq('+n+')').html(tdContent);
}
}
});
————————————————
版权声明：本文为CSDN博主「shenao_2008」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/shenao_2008/article/details/79774972