17370845950

line-clamp 实现多行文本省略需三步：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp；仅 WebKit 内核稳定支持，Firefox 部分支持，IE 完全不支持，须降级处理。

多行文本省略用 line-clamp 最直接，但要注意它必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能生效，且仅在 WebKit 内核浏览器（Chrome、Safari、Edge 新版）中稳定支持。

基础写法：三步缺一不可

要让 line-clamp 正常工作，以下三个 CSS 声明必须同时存在：

• display: -webkit-box —— 启用弹性盒的旧版 WebKit 实现
• -webkit-box-orient: vertical —— 指定子元素垂直排列
• text-overflow: ellipsis —— 触发省略号（虽非必需，但实际必加）

示例（限制 2 行）：

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

兼容性补充：Firefox 和老 IE 怎么办

Firefox 目前（v120+）已原生支持 line-clamp，但需启用 display: grid 或 flex 配合，稳定性不如 WebKit。而 IE 完全不支持，必须降级处理：

• 服务端截断（推荐）：按字数或字符数预处理文本，再加省略号
• JS 方案：用 offsetHeight + 动态删减文字，直到高度达标（注意重排开销）
• CSS 回退：对不支持的浏览器隐藏省略效果，保持自然换行（最稳妥）

常见踩坑点

这些细节不注意，line-clamp 就会失效：

• 父容器不能设 height 或 max-height（除非精确匹配行高 × 行数），否则可能提前截断或不触发省略
• 内联元素（如 span）不支持，必须是块级或 flex/grid 容器
• 如果文本含
或多个
  ，line-clamp 只作用于整个盒，不会按段落单独计算
• 中文混排英文时，确保 word-break 或 overflow-wrap 不干扰断行逻辑

现代可选方案：纯 CSS 的替代思路

若想更可控或规避兼容问题，可考虑：

• display: grid + grid-template-rows：设定固定行数高度，配合 overflow: hidden（适合固定字号/行高场景）
• clamp() 函数动态控制最大宽度，配合单行 text-overflow（适用于标题类短文本）
• 使用 container queries 配合 JS 检测容器高度后切换类名（较新，需权衡支持度）