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

## 概述 `line-clamp` 控制显示的最大行数，常与 `display: -webkit-box` 与 `-webkit-box-orient: vertical` 搭配。现代浏览器开始支持规范属性。 ## 用法/示例 ```css .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