多行文字省略号不能只用text-overflow: ellipsis，因其仅支持单行且需white-space: nowrap和overflow: hidden，会阻止换行；多行截断应使用display: -webkit-box、-webkit-box-orient: vertical和-webkit-line-clamp组合方案。
多行文字省略号为什么不能只用 text-overflow: ellipsis
因为 text-overflow: ellipsis 仅对单行生效，且依赖 white-space: nowrap 和 overflow: hidden —— 这俩会直接禁掉换行，多行自然失效。
真正能撑起多行截断的，是 display: -webkit-box 这套老但稳的 WebKit 方案，现代浏览器基本都支持，包括 Safari、Chrome、Edge（含新版），Firefox 从 68+ 也支持了 -webkit-line-clamp。
常见错误现象：
– 写了 text-overflow: ellipsis + height 却没效果
– 用了 line-clamp 但盒子没设 display: -webkit-box
– 忘记加 -webkit-box-orient: vertical，导致文字横向堆叠
-
display: -webkit-box是前提，不是可选项 -
-webkit-box-orient: vertical必须显式声明，否则-webkit-line-clamp不触发 - 需配合
overflow: hidden，否则溢出内容仍可见 - 不要给容器设固定
height（除非你真想靠高度硬卡），优先用line-clamp控制行数更可靠
标准写法：三行省略号的最小可行 CSS
以下是最小必要规则集，去掉任意一条都可能失效：
立即学习“前端免费学习笔记（深入）”；
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
说明：
– -webkit-line-clamp: 3 表示最多显示 3 行，超出部分省略
– 不要加 word-break 或 break-word，它们会影响断行逻辑，和 line-clamp 配合容易错位
– 如果父容器有 padding，确保它不干扰盒模型高度计算（尤其在 Flex 布局里）
- Firefox 支持该语法，但必须开启
layout.css.line-clamp.enabled（默认已启用，无需手动开） - IE 完全不支持，需降级方案（如 JS 截断或服务端预处理）
- 移动端 iOS Safari 12+、Android Chrome 28+ 均稳定支持
为什么不用 JavaScript 截断？
JS 方案（如用 offsetHeight + 文字逐字删减）看似灵活，但问题集中：
- 重排触发频繁，滚动时性能抖动明显
- 中英文混排、emoji、富文本（
<span>嵌套）下计算极易出错 - 响应式场景下窗口 resize 时需反复重算，逻辑复杂度指数上升
- SSR 渲染时 JS 还没执行，首屏看到的是未截断全文
CSS 方案天然无此问题：纯渲染层控制，服务端/客户端一致，resize 自动适应，也不依赖 DOM 尺寸测量。
兼容性兜底与常见陷阱
如果项目必须支持 IE 或极老安卓 WebView，CSS 方案失效，只能退到 JS。但绝大多数现代场景，应优先用 CSS，并注意这些坑：
-
-webkit-line-clamp对flex子项有时不生效 —— 解决办法：把文字容器再包一层div，让它成为 flex item 的直系子元素 - 使用
font-size: clamp()或动态字号时，line-clamp行高可能不准 —— 建议固定line-height，避免依赖字体渲染时机 - 某些 CMS 输出的 HTML 含多余
<br>或空<p>，会干扰行数计算 —— 渲染前先 normalize 文本结构 - 伪元素（如
::before）若插在文字开头，可能导致第一行缩进异常，影响省略位置
最麻烦的其实是“行高不一致”——比如用了 variable font 或系统字体栈，不同设备上每行实际高度不同，line-clamp 仍按行数算，但视觉截断点会偏移。这时候就得接受：CSS 多行省略本质是行数控制，不是像素级精确裁剪。
