-webkit-line-clamp

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

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

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

当他应用于锚 (anchor) 元素时，截取动作可以发生在文本中间，而不必在末尾。

备注： 此属性在 WebKit 中已经实现，但有一些问题。他是旧标准的一种支持。CSS Overflow Module Level 3 规范还定义了一个 line-clamp 属性，用来代替此属性且避免一些问题。

语法

/* Keyword value */
-webkit-line-clamp: none;

/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;

none: 这个值表明内容显示不会被限制。
integer: 这个值表明内容显示了多少行之后会被限制。必须大于 0.

例子

HTML

<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>

CSS

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

结果

规范

Specification
Unknown specification # webkit-line-clamp

初始值	`none`
适用元素	all elements
是否是继承属性	否
计算值	as specified
Animation type	by computed value type

浏览器兼容性

BCD tables only load in the browser