CSS line-clamp 怎样把多行文本限制在固定行数

做卡片列表时，我更愿意把“显示三行”当成一个明确的内容边界，而不是给摘要写一个碰巧合适的固定高度。line-clamp 负责限制行数，overflow: hidden 负责把超出的内容裁掉；两者配合后，容器宽度变化时仍按行数工作。

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-clamp

先分清固定行数和固定高度

同一段文字在宽卡片和窄卡片中会产生不同的换行次数，所以固定 height 只能得到一个像素边界，不能表达“最多显示三行”。line-clamp: 3 直接把目标写成三行，读者和维护者都能看懂这个约束。

需要注意，line-clamp 的职责是限制块内容的行数；如果没有隐藏溢出内容，超出的文字仍可能占据可见区域。省略号或自定义截断提示属于另一层表达，不应和容器高度混为一谈。

在卡片摘要里写最小规则

先给摘要一个可变化的宽度，再把行数限制写在摘要选择器上。下面的示例只表达布局职责，不依赖框架；代码中的中文注释说明了为什么要保留溢出裁剪。

文章标题
  
这是一段可能随着卡片宽度变化而换行的摘要文字……

.card {
  max-width: 28rem; /* 让卡片宽度可以随布局变化，而不是锁死摘要高度 */
  min-width: 0; /* 网格或弹性布局中允许内容收缩 */
}

.summary {
  line-clamp: 3; /* 直接表达最多显示三行 */
  overflow: hidden; /* 把超过行数的内容裁掉 */
}

这里不要把 overflow 理解成“让文本自动换行”的开关：换行仍由字体、宽度和其他排版属性共同决定。它的关键作用是让已被限制的多余内容不再露出。

兼容旧环境和交互状态

如果项目仍需兼容只认识旧版组合的浏览器，可以把标准写法和前缀写法并列保留。旧版方案依赖 display: -webkit-box 与 -webkit-box-orient: vertical，缺少其中一项时，不应把它当成完整的多行截断方案。

.summary {
  overflow: hidden; /* 标准和兼容写法都需要隐藏超出内容 */
  line-clamp: 3; /* 支持标准属性的环境使用这一条 */

  display: -webkit-box; /* 旧版组合写法要求的布局模式 */
  -webkit-box-orient: vertical; /* 把旧版盒模型方向设为纵向 */
  -webkit-line-clamp: 3; /* 旧版环境按三行截断 */
}

这不是一张浏览器支持矩阵：具体支持情况应以目标环境的兼容数据为准。文章写作时更重要的是保留清晰的降级策略——不支持截断时，宁可让摘要完整展示，也不要把文字永久藏在没有入口的固定高度里。

响应式布局下的三个注意点

如果摘要只是列表预览，三行截断通常足够；如果它承担通知、错误详情或操作说明，就应该把完整内容放在可访问的展开区域。line-clamp 解决的是视觉长度，不替代信息架构和键盘操作设计。

常见问题

为什么写了 line-clamp 但文字还露出来？

先检查摘要是否真正发生了换行，再确认 overflow: hidden 是否应用到了同一个文本容器；只设置行数而不处理溢出，通常看不到预期的裁剪效果。

固定三行后为什么不同设备显示的字数不一样？

行数相同不代表字符数相同。容器宽度、字体、字号和字形都会影响每行能放多少内容，行数限制正是为了让这个变化保持在可控范围内。

什么时候不适合使用 line-clamp？

当被截断的内容本身必须完整阅读，或摘要中包含关键操作控件时，应优先设计展开、详情页或全文区域，不要只靠视觉裁剪隐藏信息。

总结一下：把行数限制交给 line-clamp，把可见边界交给 overflow: hidden，把旧环境交给明确的 -webkit- 组合，并为真正需要全文的用户保留展开路径，这样卡片摘要才不会因为换行变化而失控。