超出部分隐藏以省略号表示
一、超出一行
html
<div style="width:20%;white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;">这是一段很长的文字,当容器放不下则会出现省略号。这是一段很长的文字,当容器放不下则会出现省略号。这是一段很长的文字,当容器放不下则会出现省略号。
</div>
效果
二、超出二行
html
<div style="width: 20%">
<span style="display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;">
这是一段很长的文字,当容器放不下则会出现省略号。这是一段很长的文字,当容器放不下则会出现省略号。这是一段很长的文字,当容器放不下则会出现省略号。
</span>
</div>
效果