-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