text-overflow: ellipsis 仅支持单行，多行省略需用 -webkit-line-clamp；firefox 需启用 line-clamp 且避免 display 冲突；flex 子项须设 min-width: 0；长单词需 overflow-wrap: break-word 才能触发省略。
text-overflow: ellipsis 对多行文本根本不是“失效”，而是压根不支持——它从 CSS 规范诞生起就只定义在单行场景下。所有试图只靠 text-overflow 实现多行省略的写法，都会在 Firefox、旧版 Safari 或某些 Edge 版本里直接不显示省略号。
为什么 -webkit-line-clamp 在 Firefox 里有时不生效
Firefox 自 68 起支持无前缀的 line-clamp，但前提是 layout.css.line-clamp.enabled 首选项为 true（现代版本默认开启）。问题常出在混用 display 模式：
- 父容器用了
display: flex，子元素又设display: -webkit-box—— 这会触发渲染引擎降级或样式冲突，尤其在 Firefox 中直接忽略line-clamp -
-webkit-box-orient: vertical在 Firefox 中被完全忽略，必须改用标准语法box-orient: vertical（但仅限于display: box，已废弃） - 更稳妥的做法：对 Firefox 单独加一层兜底，比如用
display: -webkit-box+line-clamp（带前缀），再用@supports (line-clamp: 2)开启无前缀版本
Flex 容器中多行省略突然不工作
Flex 子项默认 min-width: auto，会阻止内容收缩，导致即使写了 overflow: hidden 和 -webkit-line-clamp，文字仍撑开容器。这不是浏览器 Bug，而是 Flex 布局逻辑使然。
- 给需要截断的元素加
min-width: 0（最通用解法） - 或者加
overflow: hidden（部分旧 Safari 更认这个） - 避免同时设
flex: 1和width: 100%，二者叠加会让计算宽度失效 - 确认父容器没设
flex-wrap: wrap—— 多行省略要求内容严格垂直堆叠，换行会破坏-webkit-box的布局前提
长单词（URL/Token）导致省略号完全不出现
这不是 text-overflow 或 line-clamp 的问题，是文本本身无法折行。浏览器看到一串无空格字符（如 https://example.com/very-long-path-with-no-dashes），会当成一个不可分割单元，直接溢出容器边界，overflow: hidden 虽然裁剪了视觉区域，但 line-clamp 的行数计算失效，省略号自然不会生成。
- 加
word-break: break-all强制断字（慎用：可能把filename.pdf断成filena…） - 更安全的是
overflow-wrap: break-word，只在必要时断行，保留单词完整性 - 对纯英文/数字内容，可结合
hyphens: auto（需 lang 属性配合）提升可读性
真正麻烦的不是写几行 CSS，而是得时刻判断：当前文本有没有换行机会？容器是否被 Flex/Grid 的隐式尺寸规则干扰？目标浏览器是否把 -webkit- 前缀当真？这些细节不逐个核对，光抄代码只会让省略号在某个用户那里永远消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
