单行文本溢出显示…需同时满足：white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及明确宽度（width/max-width），四者缺一不可；否则省略号不生效。
直接给结论：单行文本溢出显示…，必须同时写齐 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 三者，且容器要有明确宽度（width 或 max-width），缺一不可。
为什么只写 text-overflow: ellipsis 没反应
它不是独立开关，而是“条件触发型”声明。浏览器只在确认文本被压成一行（white-space: nowrap）、且溢出部分已被裁剪（overflow: hidden）的前提下，才把末尾换成…。否则就退化为默认的 clip——静默截断，不提示。
- 写了
text-overflow: ellipsis但没加white-space: nowrap→ 文本照常换行，省略号完全不出现 - 容器是
display: inline且没设width→overflow: hidden对 inline 元素无效 - 父级用了
word-break: break-all或hyphens: auto→ 干扰文本流判断，text-overflow失效
white-space: nowrap 是关键触发开关
它不只是“不让换行”，而是让整段文字变成一个不可分割的内联盒子，从而让 overflow 有明确的“溢出边界”可计算。没有它，text-overflow 就像没通电的开关。
- 某些 CSS 重置库（如
normalize.css）会把white-space设为normal，覆盖你写的nowrap；调试时务必检查 computed 样式里的实际值 - 如果容器是 flex item 或 grid item，
white-space: nowrap仍有效，但需确保父容器没用flex-wrap: wrap把它挤变形 - 别用
white-space: pre替代，它保留空格和换行符，破坏单行逻辑
宽度限制必须显式存在
text-overflow 的“溢出”是相对于某个固定尺寸而言的。如果容器宽度由内容撑开（比如 width: auto 且无父级约束），浏览器根本不知道哪算“超出”，自然不会触发省略。
- 可行的宽度设置方式：
width: 200px（最直接）、max-width: 80%（响应式常用）、display: inline-block配合width（避免块级元素独占一行带来的布局干扰） - 不要依赖
min-width或fit-content，它们不提供上界约束 - 对
<span></span>这类原生 inline 元素，必须先加display: inline-block或display: block，否则width和overflow都不生效
真正容易被忽略的点是：这些属性必须作用在**同一元素上**，且不能被更高优先级规则覆盖（比如 scoped style 或 CSS-in-JS 的局部作用域意外屏蔽）。调试时打开开发者工具，逐项核对 computed 样式里这四项是否都真实生效——white-space、overflow、text-overflow、width（或等效约束）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
