line-clamp
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
CSS 属性 line-clamp 用于将区块容器的内容限制为指定的行数。
备注：
为了兼容旧版本，带有供应商前缀的 -webkit-line-clamp 属性只有在 display 属性设置为 -webkit-box 或 -webkit-inline-box，并且 -webkit-box-orient 属性设置为 vertical 时才会生效。尽管这些带前缀的属性已经被弃用，但这三者之间的依赖关系属于明确规范的行为，并且仍会继续受到支持。
在大多数情况下，你还需要将 overflow 设置为 hidden，否则内容不会被裁剪，但在达到指定行数后仍然会显示省略号。
当应用于锚点元素时，截断可能会发生在文本的中间，而不一定在末尾。
语法
css
/* 关键字值 */
line-clamp: none;
/* <integer> 值 */
line-clamp: 3;
line-clamp: 10;
/* 全局值 */
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>
在此示例中，<code>-webkit-line-clamp</code> 属性设置为
<code>2</code>，即文本在超过两行后将被截断。文本截断处将显示省略号。
</p>
CSS
css
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
结果
规范
| Specification |
|---|
| CSS Overflow Module Level 4 # propdef-line-clamp |
浏览器兼容性
Loading…