-webkit-line-clamp

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

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 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
是否是继承属性
适用媒体visual
计算值as specified
Animation typeby computed value type
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
-webkit-line-clampChrome Full support 6Edge Full support 17Firefox Full support 68IE No support NoOpera Full support 15Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 68Opera Android Full support 14Safari iOS Full support 4.2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support

See also