-webkit-line-clamp

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

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

当应用于锚（anchor）元素时，截断可以发生在文本中间，而不必在末尾。

备注：该属性最初在 WebKit 中实现的，但存在一些问题。由于需要支持旧版本的浏览器，该属性已在 CSS Overflow Module Level 4 中被标准化。CSS Overflow Module Level 4 规范还定义了一个 line-clamp 属性，用来代替此属性并避免一些问题。

语法

css
/* 关键词值 */
-webkit-line-clamp: none;

/* 整数值 */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* 全局值 */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;
none

这个值表明内容显示不会被限制。

<integer>

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

形式定义

初始值none
适用元素所有元素
是否是继承属性否
计算值as specified
动画类型按计算值的类型

形式语法

-webkit-line-clamp = 
  none             |
  <integer [1,∞]>

示例

截断段落

HTML

html
<p>
  在此示例中，<code>-webkit-line-clamp</code> 属性设置为
  <code>2</code>，即文本在超过两行后将被截断。文本截断处将显示省略号。
</p>

CSS

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

结果

规范

Specification
CSS Overflow Module Level 4
# propdef-line-clamp

浏览器兼容性

BCD tables only load in the browser

参见