-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	Status	Comment
CSS Overflow Module Level 3 -webkit-line-clamp	Working Draft	Initial definition

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

浏览器兼容性

BCD tables only load in the browser