text-overflow: ellipsis单独无效，因它仅定义裁剪后显示省略号，必须与white-space: nowrap（强制单行）、overflow: hidden（隐藏溢出）及明确宽度（width/max-width）协同生效，缺一不可。
必须同时满足三个条件，缺一不可：容器有明确宽度、文本强制单行、溢出被隐藏并替换为省略号。
为什么text-overflow: ellipsis单独写没用？
它只是“最后一道工序”，不负责制造溢出，只负责美化溢出。真正起作用的是前置组合：
-
white-space: nowrap：让文本拒绝换行，硬撑在一行里，这是产生水平溢出的前提 -
overflow: hidden：把撑出去的部分裁掉，不裁就谈不上“省略” -
text-overflow: ellipsis：告诉浏览器“裁掉的地方，别留空白，画个…”
三者顺序无关，但少任何一个，…都不会出现。
width或max-width为什么非设不可？
浏览器需要一个“判断溢出的标尺”。没有宽度约束，容器会随内容无限撑开，根本不会触发溢出逻辑。
- 固定宽：
width: 200px最稳妥，适合已知尺寸场景 - 响应式宽：
max-width: 100%更灵活，但需确保父容器有宽度（比如flex项里要加min-width: 0） - 行内元素（如
<span></span>）必须先转成块级：display: inline-block或display: block，否则宽度设置无效
常见失效场景和修复方式
实际开发中，以下问题最常导致省略号不显示：
- Flex/Grid 子项默认有
min-width: auto，会阻止收缩 → 加min-width: 0 - 表格单元格（
<td>）默认 <code>white-space: normal→ 必须显式覆盖为nowrap - IE8 及更老版本需要
-ms-text-overflow: ellipsis前缀（现在基本可忽略） - 移动端 WebView 渲染延迟：文字动态插入后，可能需触发重排（如临时加
visibility: hidden再恢复）
最易被忽略的一点：这个组合对「纯空格+换行符」敏感。white-space: nowrap 会让所有空白字符（包括换行）都当普通字符处理，如果原始 HTML 里有意外的换行或全角空格，可能导致视觉宽度异常。建议预处理文本或用 white-space: nowrap; word-break: keep-all; 辅助控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
