CSS 多行省略：line-clamp 与可访问性策略

---

title: CSS 多行省略：line-clamp 与可访问性策略

keywords:

• line-clamp
• 多行省略
• -webkit-line-clamp
• 文本可读性
• 可访问性

description: 介绍多行省略的常用实现（-webkit-line-clamp 方案与现代支持），在不同浏览器下的兼容策略与可访问性建议，避免信息不可达。

categories:

• 文章资讯
• 编程技术

---

概述

多行省略常用 display: -webkit-box; -webkit-line-clamp 与 -webkit-box-orient: vertical 实现，部分现代浏览器提供 line-clamp 支持。需提供完整内容的访问途径与提示。

示例

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

工程建议

• 提示与替代：为被省略内容提供“展开/更多”入口；避免影响可访问性与 SEO。
• 响应策略：在不同断点调整行数；为标题避免过度省略。
• 兼容：在不支持浏览器禁用省略或采用 JS 方案；保持体验一致。

参考与验证

• MDN 多行省略与相关属性说明：https://developer.mozilla.org/