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