line-clamp

-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient属性设置成 vertical时才有效果

在大部分情况下,也需要设置 overflow属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

-webkit-line-clamp: none;

-webkit-line-clamp: 10;

示例

<p>
  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
  An ellipsis will be shown at the point where the text is clamped.
</p>

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}