text-overflow: ellipsis 仅支持单行省略，多行必须用 -webkit-line-clamp 四件套（display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp、overflow: hidden）实现；firefox 等不支持该属性，需 js 或服务端截断降级。
text-overflow: ellipsis 在多行文本下根本不会生效——这不是浏览器差异，而是它压根不支持多行。你看到 Chrome 有省略号、Firefox 没有，不是因为“兼容性没做好”，是因为 Chrome 支持 -webkit-line-clamp，而 Firefox 不支持；text-overflow: ellipsis 自己全程没参与。
为什么 text-overflow: ellipsis 对多行完全无效
它只响应单行水平溢出，必须同时满足三个条件：white-space: nowrap、overflow: hidden、明确的 width 或 max-width。一旦允许换行（比如 white-space: normal），浏览器就直接忽略该声明，不报错也不警告。
- 加了
text-overflow: ellipsis但文字照常换行撑开容器 → 不是代码漏了啥，是它本就不该起作用 - 误以为设个
height+overflow: hidden就能截多行并出省略号 → 实际只是裁掉下半部分，没省略号 - 在 Firefox 控制台查不到错误，但就是没省略号 → 因为
text-overflow根本没被触发
-webkit-line-clamp 的最小可用组合
这是目前唯一能在 WebKit/Blink 内核中稳定实现多行省略号的纯 CSS 方案，但必须四件套齐备，缺一不可：
-
display: -webkit-box—— 不能用flex、grid或block替代 -
-webkit-box-orient: vertical—— 必须显式写，漏掉整条规则就失效 -
-webkit-line-clamp: 3—— 值必须是正整数，不支持calc()或小数 -
overflow: hidden—— 不是可选，是强制要求；仅靠text-overflow: ellipsis没用
另外，容器需有明确宽度约束（如 max-width）或高度限制（如 max-height），否则某些场景下可能不触发截断。
Firefox 和旧版 Safari 怎么办
它们不支持 -webkit-line-clamp，也没有等效的原生 CSS 方案。别折腾“兼容写法”，降级只有两条现实路径：
-
JS 截断：用
scrollHeight/line-height推算行数，或用getBoundingClientRect()测量真实高度，再手动截字符串 + 拼"…"；注意字体加载延迟、缩放、动态内容会导致计算偏移 -
服务端预截断：按字符数或字节数提前截好，带上
"…"返回 HTML；适合静态摘要、CMS 页面等低频更新场景，避免客户端压力
伪元素遮盖法（::after + 渐变背景）看着轻量，但行高浮动、中英文混排、系统字体缩放都会让它错位——真要上线，得先测透这些边界。
真正麻烦的不是“怎么写 CSS”，而是当你发现卡片里三行摘要在 Firefox 里多出半行、用户放大字体后省略号飘到天边时，才意识到：那个简洁的 … 背后，大概率藏着一行 if (isFirefox) {} 或一次后端字符串处理调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
