max-lines

max-lines 属性将块的内容限制为最大行数，在被截断之前，当与 block-overflow 结合使用时，可以创建一个行截断效果。 实际上，这两个属性构成了 line-clamp 属性，它是将这两个属性组合在一起的简写形式。

值得注意的是，引入 max-lines 的规范目前处于编辑草案阶段，因此这里讨论的所有内容都可能发生变化，因为它仍在开发中。 该规范甚至指出，该属性有被取消候选推荐的风险。 也就是说，该规范也很快指出，这并不意味着该想法可能会被简单地推迟，它可能在另一个草案阶段出现。

语法

.module {
  max-lines: [none | <integer>];
}

max-lines 接受以下值

• none：不设置最大行数，所有内容都将呈现。
• <integer>：内容被丢弃之前的行数。 仅接受正整数。 负值将被丢弃并导致属性被忽略。

该规范指出，该属性的整数值可以被动画化。 由于缺乏浏览器支持，我们没有演示，但这可能是一种有趣的创建效果，通过用户交互隐藏或显示更多内容。

限制可见行的属性

该规范将 max-lines 描述为“限制可见行”，这是因为位于最大行数内的内容将保留在视图中，而其余内容则“既不渲染也不测量”。 换句话说，位于最大行数之外的内容根本不会被浏览器渲染，类似于将内容设置为 display: none;。

该规范继续描述被 max-lines 截断的内容为片段：一个在视图中渲染的片段，另一个未渲染且位于视图之外的片段。 接下来可能会让人感觉像《黑客帝国》的情节，因为包含内容的框变成了一个“碎片容器”，它捕获并存储那个被分割的部分（现在被称为 <"区域断点“) 并且能够将它传递给另一个框，如果它是 CSS 区域 的一部分。

可以将其想象成旧式报纸，页面上的文章被分成几列。 如果我们在某一列上设置 max-lines，而该列旁边还有另一列是同一篇文章的一部分，那么第一列中剩下的内容可以流入下一列。

浏览器支持

目前没有，但可以使用 WebKit 专有的 line-clamp 实现获得一些支持

相关属性

• block-overflow
• line-clamp

其他资源

• CSS 溢出模块级别 3 – 引入块溢出的编辑草案
• Safari CSS 参考 – 未支持的 WebKit 实现的文档
• 行截断（截断多行文本） – 作者：Chris Coyier
• Clamp.js – 用于跨浏览器支持的 JavaScript 方法
• 卡片 UI 的缺陷 – Dave Rupert 考虑了截断文本的风险