概述`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

发表评论 取消回复