-webkit-line-clamp
是一个非标准的css属性,可以把块容器(如 div 或 p)中的内容限制为指定的行数。-webkit
前缀表示该属性是专门为基于 WebKit 的浏览器(如 Safari 和 Chrome)等设计的。
备注:该属性最初在 WebKit 中实现的,但存在一些问题。由于需要支持旧版本的浏览器,该属性已在 CSS Overflow Module Level 4 中被标准化。CSS Overflow Module Level 4 规范还定义了一个
line-clamp
属性,用来代替此属性并避免一些问题。
它只有在 display
属性设置成 -webkit-box
或者 -webkit-inline-box
并且 box-orient
属性设置成 vertical
时才有效果。
在大部分情况下,也需要设置 overflow
属性为 hidden
,否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号。
当应用于锚(anchor)元素时,截断可以发生在文本中间,而不必在末尾。
语法
/* 关键词值 */
-webkit-line-clamp: none;
/* 整数值 */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;
/* 全局值 */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;
形式语法
-webkit-line-clamp =
none |
<integer [1,∞]>
none
这个值表明内容显示不会被限制。
<integer>
这个值表明内容显示了多少行之后会被限制。必须大于 0。
示例
html
<p>
零五网[www.02405.com]示例:在此示例中,<code>-webkit-line-clamp</code> 属性设置为
<code>2</code>,即文本在超过两行后将被截断。文本截断处将显示省略号。
</p>
css
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
结果