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-clampweb.dev：Line clamp — https://web.dev/articles/css-line-clamp