2021-03-23

-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

 

浏览器兼容性

Report problems with this compatibility data on GitHub

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox Android	Opera Android	Safari on iOS	Samsung Internet
-webkit-line-clamp	Full support6	Full support17	Full support68	No supportNo	Full support15	Full support5	Full support≤ 37	Full support18	Full support68	Full support14	Full support4.2	Full support1.0

Legend

Full support

Full support

No support

No support