1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 属性
  5. line-clamp

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

line-clamp

有限可用

此特性不属于基线，因为它尚未在主流浏览器中得到支持。

Want more browser support for this feature? Tell us why.

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;

值

none

该值表示内容不会被截断。

<integer>

该值表示内容在指定的行数之后会被截断。其值必须大于 0。

形式定义

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

形式语法

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

<integer> = 
  <number-token>  

<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;
}

结果

规范

规范
CSS Overflow Module Level 4
# propdef-line-clamp

浏览器兼容性

参见

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题