一、单行文本
.box { width: 200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
二、多行文本
1. csss实现,适用于webkit内核浏览器、移动端、微信可以,火狐不可以
.box {
width: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
2. js实现,适用于所有浏览器,原理是截取指定字数的文字
vue项目用于过滤器:
filters: {
//处理多行文本...
//示例 {{text | ellipsis(35)}} 35为限制字数
ellipsis(text,num) {
if(text.length > num){
return text.substring(0, num) + ‘...‘;
}else {
return text;
}
},
}
jq项目:
// 文字超出显示...
//示例 ellipsis(‘.box‘,86);
function ellipsis(box, num) {
$(box).each(function () {
if ($(this).text().length > num) {
$(this).text($(this).text().substring(0, num) + ‘…‘);
}
});
}
原文地址:https://www.cnblogs.com/zhangruiqi/p/11434336.html