CSS line-clamp：多行截断与可访问性

概述

line-clamp 控制显示的最大行数，常与 display: -webkit-box 与 -webkit-box-orient: vertical 搭配。现代浏览器开始支持规范属性。

用法/示例

.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@supports (line-clamp: 3) {
  .excerpt { line-clamp: 3 }
}

工程建议

• 为截断文本提供完整内容入口与悬浮提示，避免信息缺失。
• 在关键内容避免过度截断，优先布局优化与交互展开。
• 验证不同语言与脚本的断词与可读性表现。

参考与验证

• MDN：Line clamp — https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp
• web.dev：Line clamp — https://web.dev/articles/css-line-clamp