line-clamp

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

line-clamp CSS 属性可以把块容器中的内容限制为指定的行数。

备注: 为了兼容旧版本,供应商前缀的 -webkit-line-clamp 属性仅在与 display 属性设置为 -webkit-box-webkit-inline-box-webkit-box-orient 属性设置为 vertical 时生效。尽管这些带前缀的属性已被废弃,但这三个属性的相互依赖关系是一种完全规范化的行为,并将继续得到支持。

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 box-orient 属性设置成 vertical时才有效果。

在大部分情况下,也需要设置 overflow 属性为 hidden,否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号。

当应用于锚(anchor)元素时,截断可以发生在文本中间,而不必在末尾。

语法

css
/* 关键词值 */
line-clamp: none;

/* 整数值 */
line-clamp: 3;
line-clamp: 10;

/* 全局值 */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
line-clamp: unset;
none

这个值表明内容显示不会被限制。

<integer>

这个值表明内容显示了多少行之后会被限制。必须大于 0。

形式定义

初始值none
适用元素Block containers except multi-column containers
是否是继承属性
计算值as specified
动画类型an integer

形式语法

line-clamp = 
none |
<integer [1,∞]> || <'block-ellipsis'>

<block-ellipsis> =
none |
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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line-clamp
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见