内容溢出处理
單行內容：
"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;?
轉載于:https://www.cnblogs.com/JaneBlog/p/7239286.html
總結
