text-overflow: ellipsis生效必须同时满足三个条件：容器有明确宽度（如width或max-width）、white-space: nowrap、overflow: hidden；缺一不可，否则省略号不会显示。
text-overflow: ellipsis 要生效，必须同时满足三个条件：容器有明确宽度、white-space: nowrap、overflow: hidden。缺一不可，否则省略号不会出现。
为什么 text-overflow: ellipsis 不显示？
最常见的原因是漏掉某个必要前提：
-
white-space: nowrap缺失：文本会自动换行，根本不会“溢出”到需要裁剪的程度 -
overflow: hidden缺失：即使文本超出，也会直接撑开或溢出容器，浏览器不触发省略逻辑 - 容器没设
width或max-width：块级元素默认width: auto，会无限扩展容纳内容 - 对内联元素（如
<span>）直接使用：它不响应width，需先加display: inline-block或display: block
white-space: nowrap 的作用不是“让文字变短”，而是“让溢出可被检测”
这个属性强制所有字符挤在一行，是触发 text-overflow 的开关。它和 overflow: hidden 是一对搭档——前者制造“潜在溢出”，后者执行“实际裁剪”。没有 nowrap，哪怕容器很窄，文本也会折行，ellipsis 完全不介入。
注意：white-space: nowrap 会影响整个元素内的空格、换行符行为，如果内容里有 <br> 或预格式化文本，它们会被忽略。
立即学习“前端免费学习笔记（深入）”；
响应式场景下用 max-width 更安全
固定 width: 200px 在移动端容易撑破布局。推荐优先用：
-
max-width: 100%+ 父容器有宽度限制（比如flex子项或grid单元格） - 配合 Tailwind 的
truncate类，本质就是封装了这三属性，但同样依赖父容器宽度约束 - 避免在
display: flex容器中仅靠flex: 1而不设min-width: 0：flex 项默认最小宽度是内容长度，会阻止收缩，导致ellipsis失效
Firefox / Safari / Chrome 都支持，但 IE 需前缀
现代浏览器已无兼容问题，但若还需支持 IE9–10，得加：
.ellipsis {
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
不过 -ms- 前缀在 Edge 16+ 已废弃，现在基本可忽略。真正容易被忽略的是：某些 CSS 重置库（如 normalize.css）可能覆盖了 white-space 默认值，建议在调试时检查 computed 样式里 white-space 是否确实是 nowrap。
