内容溢出处理

Posted 2020-09-29 小白历险记~

单行内容：

"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;