-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 |
---|
CSS Overflow Module Level 3 # webkit-line-clamp |
浏览器兼容性
BCD tables only load in the browser