单行省略:
<div class="over-width">单行文本超出了元素宽度,益处部分用省略号代替</div>
<style lang="scss" scoped>
.over-width {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
多行省略:
<div class="over-width">
多行文本超出了元素宽度,益处部分用省略号代替——多行文本超出了元素宽度,
益处部分用省略号代替——多行文本超出了元素宽度,益处部分用省略号代替
</div>
<style lang="scss" scoped>
.over-width {
width: 300px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 超出几行省略 */
overflow: hidden;
}
</style>
注意:给元素添加width