超出部分隐藏以省略号表示

超出部分隐藏以省略号表示

一、超出一行
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>

效果