一段文字超过5行省略号显示，最后面加个小标签。

在这里插入代码片
其中294是自己算的，视情况而定。
<span class=“name-textflow-five left” v-if=“getSize(data.name)>294 getSize(data.name)==294” >
<div class=“intro-content” :title=“data.name” ref=“desc”>
<span class=“merchant-desc”> {{data.name}}</span>
<span :class="{‘unfold’: getSize(data.name)>294 || getSize(data.name)==294}" >
<p>
<span class=“mutex”>标签{{data.mutexNum}}</span>
</p>
</span>
</div>
</span>
//获取名称占用的字符数
getSize(dataName) {
var totalLength = 0;
var charCode;
for (var i = 0; i < dataName.length; i++) {
charCode = dataName.charCodeAt(i);
if (charCode < 0x007f) {
totalLength++;
} else if ((0x0080 <= charCode) && (charCode <= 0x07ff)) {
totalLength += 2;
} else if ((0x0800 <= charCode) && (charCode <= 0xffff)) {
totalLength += 3;
} else {
totalLength += 4;
}
}
var totalLengthMax=Number(totalLength);
return totalLengthMax;
},
在style标签中：
.mutex{
border: 1px solid #4680FF;
border-radius: 9px;
font-size: 12px;
padding: 2px;
color: #4680FF;
}
.name-textflow-five {
position: relative;
overflow: hidden;
.intro-content {
// 最大高度设为5倍的行间距
max-height: 105px;
line-height: 21px;
word-wrap: break-word;
/强制打散字符/
word-break: break-all;
background: #ffffff;
/同背景色/
color: #ffffff;
overflow: hidden;
.merchant-desc {
width: 100%;
line-height: 21px;
}
&:after,
// 这是展开前实际显示的内容
&:before {
content: attr(title);
position: absolute;
left: 0;
top: 0;
width: 100%;
color: #434343
// overflow: hidden;
}
// 把最后最后一行自身的上面四行遮住
&:before {
display: block;
overflow: hidden;
z-index: 1;
max-height: 84px;
background: #ffffff;
}
&:after {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
height: 100px;
/截取行数/
-webkit-line-clamp: 5;
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*行首缩进字符数，值为[(截取行数-1)尾部留空字符数]/
text-indent: -12em;
/尾部留空字符数/
padding-right: 4em;
}
.unfold {
width: 40px;
height: 21px;
outline: 0;
position: absolute;
right: 0;
bottom: 0;
p {
line-height: 21px;
z-index:11;
}
}
}
}