单行省略
.singe-line {
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
}
<p>单行省略</p>
<div class="singe-line box" :title="content">
{{ content }}
</div>
多行省略
.double-line {
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; //设置显示几行文字,溢出则省略
-webkit-box-orient: vertical;
}
<p>两行省略</p>
<div class="box">
<div class="double-line" :title="content2">
{{ content2 }}
</div>
</div>