text-overflow: ellipsis 生效需同时满足四个条件：white-space: nowrap、overflow: hidden、明确宽度约束（如 width 或 max-width）、容器非 inline 元素；缺一则失效。
text-overflow: ellipsis 单独写完全没用，浏览器直接当它不存在。它必须和 white-space: nowrap、overflow: hidden 以及一个**有明确上界的宽度**（如 width 或 max-width）一起出现，才可能生效。
为什么 text-overflow: ellipsis 常常不显示
这不是浏览器 bug，而是它根本没进入“可触发状态”。常见原因包括：
-
white-space被重置库（比如normalize.css）设回normal，导致 computed 样式里实际不是nowrap - 容器是
display: inline，而overflow对 inline 元素无效 - 父级用了
word-break: break-all或hyphens: auto，干扰了文本流判断 - 容器宽度由内容撑开（
width: auto且无约束），浏览器无法确定“哪算溢出”
单行省略必须同时设置的三个 CSS 属性
缺一不可，顺序无关，但逻辑上要协同：
-
white-space: nowrap：关键开关，让文本变成一个不可分割的内联盒子，为overflow提供可计算的边界 -
overflow: hidden：裁剪超出部分，否则省略号没意义；不能用visible或留空 -
text-overflow: ellipsis：仅在此时才从默认的clip切换为显示…
另外，容器必须有明确宽度约束，例如：width: 200px、max-width: 80%，或在 flex 容器中加 min-width: 0 防止子项撑宽。
多行省略怎么写：用 -webkit-line-clamp
原生 text-overflow 不支持多行。目前唯一广泛可用的方案是 WebKit 扩展组合：
- 必须用
display: -webkit-box - 必须配
-webkit-box-orient: vertical - 指定行数：
-webkit-line-clamp: 3（数字即截断行数） - 仍需
overflow: hidden，text-overflow: ellipsis在此场景下只是冗余但无害
注意：-webkit-line-clamp 在 Firefox 117+ 才开始支持，旧版需降级处理；若父容器是 flex，子元素建议加 align-self: flex-start 或 min-width: 0，否则宽度计算异常会导致截断失效。
表格单元格里省略号失效怎么办
表格默认是 table-layout: auto，列宽由内容决定，white-space: nowrap 和 overflow 很容易被忽略。解决方法很直接：
- 给
table加table-layout: fixed和明确宽度（如width: 100%） - 给目标
td或th设置white-space: nowrap、overflow: hidden、text-overflow: ellipsis，再加max-width（比如max-width: 150px）
不这么做的话，即使所有属性都写了，td 也可能悄悄把宽度撑开，让“溢出”根本不会发生。
最容易被忽略的其实是宽度来源——它必须是“强制存在的上界”，而不是靠内容推导出来的。哪怕你写了 text-overflow: ellipsis 和 white-space: nowrap，只要容器宽度没被真正锁住，整个链条就断在第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
