text-overflow: ellipsis单独无效，必须与white-space: nowrap、overflow: hidden及明确width/max-width三者共存才生效；它仅在文本被强制单行且溢出被裁剪时触发省略号显示，否则退化为静默裁切。
必须同时设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis，缺一不可；否则省略号根本不会出现。
为什么只写 text-overflow: ellipsis 没用
它不是独立生效的属性，而是“提示型”声明：浏览器只在确认文本被压成一行且溢出内容已被裁剪时，才把末尾替换成 …。否则就退化为默认值 clip——静默裁切，不显示省略号。
常见错误现象包括：
- 写了
text-overflow: ellipsis但漏了white-space: nowrap，结果文本照常换行，省略号完全不出现 - 容器是
display: inline且没设width，导致overflow: hidden失效（inline 元素对overflow不敏感） - 父级用了
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%（响应式常用） - 对
inline元素（如span）加display: inline-block再配width，避免块级独占一行带来的布局干扰
不要依赖 min-width 或 fit-content，它们不提供上界约束。
最容易被忽略的是：这三个属性必须作用在**同一个元素上**，且该元素得是能接受盒模型控制的类型（block / inline-block / flex item 等）。写在父容器上、或拆到不同层级里，都会失效。
