text-overflow: ellipsis 仅对单行有效，多行省略需用 -webkit-line-clamp；其要求 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: n 和 overflow: hidden，且不被 flex/grid 破坏，firefox 需 fallback 方案。
text-overflow: ellipsis 对多行文本无效，必须换用其他机制。纯 CSS 实现多行省略号，核心是 -webkit-line-clamp，但它不是标准属性，且仅在 WebKit/Blink 内核浏览器中可靠生效。
为什么 text-overflow: ellipsis 不能用于多行
该属性只作用于**单行块容器**（即 white-space: nowrap + overflow: hidden 的组合），它不感知行高、行数或垂直溢出逻辑。一旦允许换行（white-space: normal），text-overflow 就完全失效。
常见错误现象：
- 给多行 p 元素加了 text-overflow: ellipsis 却没效果
- 混用 display: flex 或 display: grid 后 -webkit-line-clamp 失效
- 忘记设置 overflow: hidden，导致文字直接撑开容器
-webkit-line-clamp 的正确写法与限制
这是目前最简、最稳定的多行省略方案，但必须严格满足以下条件：
-
display: -webkit-box—— 不能用flex、grid或block -
-webkit-box-orient: vertical—— 缺少这句，-webkit-line-clamp不触发 -
-webkit-line-clamp: N—— N 是整数，表示最多显示 N 行（超出部分隐藏并加省略号） -
overflow: hidden—— 必须显式声明，否则内容仍会溢出 - 容器需有明确的宽度（
width或max-width）和高度约束（可选，但推荐）
示例：
.multiline {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 300px;
}
Firefox 和旧版 Edge 的兼容 fallback 方案
Firefox 不支持 -webkit-line-clamp，若需跨浏览器一致表现，只能退回到基于高度裁剪的模拟方案：
- 用
line-height× 行数 =max-height粗略截断 - 配合
overflow: hidden隐藏溢出内容 - 用伪元素
::after在右下角叠加省略号（需position: relative+absolute定位） - 该方案无法精确控制“第 N 行末尾”位置，省略号可能遮挡文字或错位
- 响应式场景下，
line-height变化会导致max-height失准
关键点：这不是真正的“多行省略”，而是视觉近似；不要指望它在所有字体、字号、DPI 下都对齐。
容易被忽略的细节
实际项目中最常踩的坑不是写法，而是上下文干扰：
- 父容器设置了
display: flex且未设align-items: flex-start，子元素-webkit-box可能被拉伸变形 - 文本含
<br>
或内联标签（如<strong></strong>），会破坏-webkit-line-clamp的行计数 - 使用了 CSS-in-JS（如 Emotion、Styled Components）时，
-webkit-前缀可能被自动剥离，需手动加引号或启用插件 - 移动端 Safari 对
-webkit-line-clamp的行数上限敏感，超过 5 行时偶发渲染异常
真正可靠的多行省略，目前仍依赖 -webkit-box 方案；其它方式都是妥协。别试图用 JavaScript 动态计算截断——性能差、闪屏、SEO 不友好，且移动端重排更不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
