前端页面文字长度显示控制

  Web页面上，有些组件的文字显示长度是需要控制的，例如表格中单元格内的文字宽度，label的文字宽度等。比如单元格的宽度是50px，假设文字内容宽度是80，这样就是把表格撑开，并且会换行，导致页面布局错乱。面对这种情况，通常是通过禁止换行并分割文字，隐藏文字实现控制。

    通用的方法是通过css来控制，主要涉及到三个属性：overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis; 就可以实现，结果是组件上会部分显示文字，超出的部分，以省略号的形式显示。为了用户能看到全部的文字，一般会在组件的title属性中填写要显示的全部文字。

     上述的方法可以解决大多数的文字显示不开的问题，但是有时候，浏览器并不一定会支持上述的显示，例如IE10下，文字虽然会被分割，但是不显示省略号，或者IE10下，由于某些原因，干脆就完全没有效果，这个时候，就该考虑另一种方法了：

      通过js实现这种控制，并且要对所有的同类型组件起到相同控制。方法如下：首先获取所有同类型组件，然后遍历组件获取值，判断这个值的长度是否超过设置的宽度，超过则截取，并重新按照我们自己设定的内容赋值，不超过则正常显示。这样就实现了文字显示的控制，并且这种js实现的方式，兼容性会相对好一点。为了实现全局控制，需要把这个操作代码放入到共用的js中。

     上述的结果和代码如下所示：

图1 未处理，这里是两个label

图 2 处理后的效果

 

css代码：

 label {  
   width: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