当前位置:Gxl网 > 互联网 > 内容溢出处理

内容溢出处理

时间:2021-07-01 10:21:17 帮助过:3人阅读

单行内容:

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