-webkit-line-clamp

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中无法使用。

**-webkit-line-clamp** CSS 属性允许将 块级 元素的内容限制为指定行数。

它仅在与 display 属性设置为 -webkit-box 或 -webkit-inline-box 以及 -webkit-box-orient 属性设置为 vertical 结合使用时才有效。尽管它们已被弃用，但这三个属性的共同依赖关系是完全指定的行为，并将继续得到支持。

在大多数情况下，您还需要将 overflow 设置为 hidden，否则内容不会被裁剪，但在指定行数后仍会显示省略号。

当应用于锚元素时，截断可能发生在文本中间，而不是一定发生在文本末尾。

**注意：** 此属性最初是在 WebKit 中实现的，存在一些问题，例如对其他两个遗留属性的依赖。它在 CSS Overflow Module Level 4 中得到了标准化，用于提供遗留支持。CSS Overflow Module Level 4 还定义了 line-clamp 属性，该属性旨在替换此属性并避免其问题。但是，出于兼容性原因，所有支持 line-clamp 的浏览器也将支持 -webkit-line-clamp。

语法

css
/* 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: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;

值

none

此值指定内容不会被截断。

<integer>

此值指定将截断内容的行数。它必须大于 0。

正式定义

初始值none
适用于所有元素
继承否
计算值如指定
动画类型按计算值的类型

正式语法

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

示例

截断段落

HTML

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

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

结果

规范

规范
CSS Overflow Module Level 4
# propdef-line-clamp

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅