line-clamp
line-clamp CSS 属性允许将块内容的行数限制为指定值。
注意： 为了兼容旧版，带有厂商前缀的 -webkit-line-clamp 属性仅在 display 属性设置为 -webkit-box 或 -webkit-inline-box 且 -webkit-box-orient 属性设置为 vertical 时才有效。尽管这些带有前缀的属性已废弃，但这三个属性的共同依赖是一个完全指定的行为，并将继续得到支持。
在大多数情况下，你可能还需要将 overflow 设置为 hidden，否则内容不会被裁剪，但在指定行数之后仍会显示省略号。
当应用于锚元素时，截断可能发生在文本中间，而不一定是末尾。
语法
css
/* Keyword value */
line-clamp: none;
/* <integer> values */
line-clamp: 3;
line-clamp: 10;
/* Global values */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
line-clamp: unset;
值
正式定义
正式语法
line-clamp =
none |
[ <integer [1,∞]> || <'block-ellipsis'> ] -webkit-legacy?
<block-ellipsis> =
no-ellipsis |
auto |
<string>
示例
截断段落
HTML
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
css
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
结果
规范
| 规范 |
|---|
| CSS Overflow Module Level 4 # propdef-line-clamp |
浏览器兼容性
加载中…