text-overflow: ellipsis 仅支持单行省略，多行下被浏览器直接忽略；其生效必须同时满足 white-space: nowrap、overflow: hidden 和明确宽度约束；所谓“浏览器差异”实为 -webkit-line-clamp 的兼容性问题，非 text-overflow 本身所致。
text-overflow: ellipsis 本身没有“浏览器差异”，它在所有主流浏览器中行为完全一致——只对单行生效，多行时直接被忽略。你看到的“Chrome 有省略号、Firefox 没有”，其实是 -webkit-line-clamp 的支持差异，不是 text-overflow 的锅。
为什么 text-overflow: ellipsis 在多行下完全不工作
它根本没设计成处理多行：必须同时满足三个条件才触发——white-space: nowrap（锁住换行）、overflow: hidden（创建裁剪边界）、width 或 max-width（提供溢出判定依据）。一旦设了 white-space: normal 或允许换行，text-overflow 就彻底失能，浏览器连尝试都不尝试，也不报错。
- 加了
text-overflow: ellipsis但文字照常换行撑开容器 → 不是漏写了啥，是它本就不该起作用 - 设了
height+overflow: hidden却没省略号 → 实际只是把下面几行“物理裁掉”，text-overflow根本没参与 - Firefox 控制台查不到错误，但就是没省略号 → 因为
text-overflow压根没被触发，不是兼容性问题
-webkit-line-clamp 在 Chrome/Safari 和 Firefox 中的表现差异
这是真正存在浏览器差异的地方：-webkit-line-clamp 是 WebKit/Blink 专属私有属性，Firefox、旧版 Safari（
- Chrome 125+ 已支持无前缀的
line-clamp（标准语法），但仅限 Blink 内核；Firefox 仍无计划支持 - 必须四件套齐备才生效：
display: -webkit-box（不能用flex或grid替代）、-webkit-box-orient: vertical（漏写整条规则就失效）、-webkit-line-clamp: 2（值必须是正整数）、overflow: hidden（强制要求） - 容器还需有明确宽度约束（如
max-width）或高度限制（如max-height），否则某些场景下计算逻辑不触发截断
Flex 布局中 text-overflow 失效的常见原因
在 display: flex 容器的子项上设 text-overflow: ellipsis 是高频翻车点，根源在于 flex-shrink 默认为 1，导致文本容器被压缩，overflow: hidden 的触发时机错乱。
立即学习“前端免费学习笔记（深入）”；
- 给文本元素加
min-width: 0（最通用解法），强制它可收缩到 0，让overflow正常生效 - 或设
flex-shrink: 0（适合固定宽度场景），阻止它被压缩 - 避免同时写
width: 100%和flex: 1，容易让宽度计算失准 - 注意：Bootstrap 的
text-truncate类只对块级元素有效，inline元素需手动加display: block或inline-block
移动端真机测试必须做，模拟器不准
字体渲染差异会让同一段文字在 iOS San Francisco 和 Android Roboto 下溢出点偏移 1–2px，导致省略号位置错位或提前/延后出现。Ch 或 em 单位尤其危险，不同设备缩放、DPR、字体加载延迟都会影响最终效果。
- 优先用
px或rem（配合一致的根字号）做宽度基准 - 标称
max-width: 120px时，实际设max-width: 116px预留余量 - 中英文混排、emoji、CJK 字符宽度不一，服务端预截断或 JS 截断比纯 CSS 更可控
最麻烦的永远不是写那三行 CSS，而是判断当前场景到底该用哪条路：单行就老老实实用 text-overflow 三件套；多行且只跑 iOS/新版 Chrome，可以赌 -webkit-line-clamp；其他情况，JS 截断或服务端预处理才是真实世界里最稳的选择。
