單行內容：

"width":"100px",
"whiteSpace":"nowrap",
"overflow":"hidden",
"text-overflow":"ellipsis"

前提：固定內容容器寬度

要求：

1、禁止文本換行 "whiteSpace":"nowrap"

2、讓溢出文本隱藏 "overflow":"hidden" （此處設置了寬度方可知道文本是在何位置溢出，沒有寬度，無法達到溢出隱藏效果）

3、讓文本溢出後，末尾出現省略號 "text-overflow":"ellipsis"

多行文本：

粘貼自腳本之家，標題：CSS(js)限制頁面顯示的文本字符長度

// copyright c by zhangxinxu v1.0 2009-09-05 
 

// http://www.zhangxinxu.com 
/* $(".test1").wordLimit(); 自動獲取css寬度進行處理，如果css中未對.test1給定寬度，則不起作用 
$(".test2").wordLimit(24); 截取字符數，值為大於0的整數，這裏表示class為test2的標簽內字符數最多24個 
*/ 
(function($){ 
$.fn.wordLimit = function(num){ 
this.each(function(){ 
if(!num){ 
var copyThis = $(this.cloneNode(true)).hide().css({ 
 
‘position‘: ‘absolute‘, 
‘width‘: ‘auto‘, 
‘overflow‘: ‘visible‘ 
}); 
$(this).after(copyThis); 
if(copyThis.width()>$(this).width()){ 
$(this).text($(this).text().substring(0,$(this).text().length-4)); 
$(this).html($(this).html()+‘...‘); 
copyThis.remove(); 
$(this).wordLimit(); 
}else{ 
copyThis.remove(); 
 
//清除復制 
return; 
} 
}else{ 
var maxwidth=num; 
if($(this).text().length>maxwidth){ 
$(this).text($(this).text().substring(0,maxwidth)); 
$(this).html($(this).html()+‘...‘); 
} 
} 
}); 
} 
})(jQuery); 

修改後使用：

$(function(){
 //限制字符個數
 //maxwidth:多少個字（不分漢字、字母）

$("a.ms-listlink").each(function(){
var maxwidth = 10;
if($(this).text().length > maxwidth ){
$(this).text($(this).text().substr(0,maxwidth));
$(this).html($(this).html() + "…"); //重新賦值再展示，否則只會展示被截取的 maxwidth個漢字
}
});
});

僅作用於 Chrome 多行文本控制:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

內容溢出處理