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

---

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

keywords:

• line-clamp
• -webkit-line-clamp
• 溢出截断
• 文本可读性
• 兼容策略

description: 使用 line-clamp 实现多行截断，兼容不同浏览器并保证可访问性与可读性，提供回退与交互提示建议。

categories:

• 文章资讯
• 编程技术

---

概述

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