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 检测容器高度后切换类名（较新，需权衡支持度）
