关于多行溢出显示省略号的问题，如果是根据字符的长度个数限制 超过部分替换为省略号，这种还是很好处理的，关键是根据行数，在未知情况下你不知道需要多少内容，去填满一个元素，做起来还是比较麻烦的，网上很多种乱七八糟的方案，拿过来又不能直接用，，我就结合网上的思路重新整理修改一波可以直接用的几种方案。
一、单行溢出出现省略号显示：
<div class="p">张艺兴张艺兴张艺兴张艺兴张艺兴</div>
样式：
.p{
width:1rem;
overflow:hidden;//超出部分隐藏
white-space:nowrap;//禁止换行
text-overflow:ellipsis//省略号
}
图：
二、多行溢出出现省略号（css方案）：
这样方案简单易懂，但是存在兼容性，只适用于在webkit浏览器或者移动端。
<div class="p">小绵羊小绵羊小绵羊小绵羊小绵羊小绵羊</div>
样式：
.p{
width:1rem;
height:0.4rem;//需要设置高度
//必须结合的属性，将对象作为弹性伸缩盒对象的子元素的排列仿古式
display:-webkit-box;
-webkit-box-orient:vertical;
text-overflow:ellipsis;
-webkit-line-clamp:2;//例如超过2行显示省略号
overflow:hidden;
}
注意：这种用css解决的方案存在兼容性问题，这里提一个小捷径，如果你使用css出现了兼容问题，可以尝试下把样式写在行内，可能会解决兼容哦。（没有绝对性，只是经验。。。。哈哈） 那么有没有完美的方案，也不存在兼容的方案呢？强大的js可以解决，只不过有点难，但是比较保险的。。。。
三、多行溢出出现省略号（js方案）：
<template>
<div class="box">
<textarea id="" rows="10" v-model="val"></textarea>
<div id="boxid" class="text" v-text="val" ></div>
<button @click="btn">按钮</button>
</div>
</template>
<script>
export default {
data(){
return {val:""}
},
methods:{
btn(){
//参数1 元素id 参数2 要限制的行数 参数3 输入的值
this.moreline('boxid',3,this.val)//传3表示超过3行时省略号显示。
},
moreline(id,rows,str){
var boxid = document.getElementById(id);
var computedStyle = document.defaultView.getComputedStyle(boxid,null);
var lineHeight = computedStyle.lineHeight;
var top = rows*parseInt(lineHeight);
var tempstr = str;
boxid.innerHTML = tempstr;
var len = tempstr.length;
var i = 0;
if(boxid.offsetHeight<=top){
}else{
var temp = "";
boxid.innerHTML = temp;
while(boxid.offsetHeight<=top){
temp = tempstr.substring(0,i+1);
i++;
boxid.innerHTML = temp;
}
var slen = temp.length;
tempstr = temp.substring(0,slen-1);
len = tempstr.length;
boxid.innerHTML = tempstr.substring(0,len-1)+"...";
boxid.height = top+"rem";
}
}
}
}
</script>
结果图：
使用js实现不太容易理解，目前最靠谱，方法封装好，灵活使用，可根据各自的需要通过传参数满足各自的需要。
新增点击可展开功能及代码：
moreline(id,rows,str){
var boxid = document.getElementById(id);
var computedStyle = document.defaultView.getComputedStyle(boxid,null);
var lineHeight = computedStyle.lineHeight;
var top = (rows+1)*parseInt(lineHeight);
var tempstr = str;
boxid.innerHTML = tempstr;
var len = tempstr.length;
var i = 0;
if(boxid.offsetHeight>top){
var temp = "";
boxid.innerHTML = temp;
while(boxid.offsetHeight<=top){
temp = tempstr.substring(0,i+1);
i++;
boxid.innerHTML = temp;
}
tempstr = temp.substring(0,temp.length-1);
len = tempstr.length;
boxid.innerHTML = tempstr.substring(0,len-3)+"..."+`<span class="a">展开</span>`;
boxid.height = top+"rem";
let en = document.querySelector(".a")
en.onclick = function(){
boxid.innerHTML = str;
}
}
}
效果图：
点击展开：
作者：一直在路上的小仙女 链接：juejin.cn/post/692135… 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
