text-overflow: ellipsis生效必须同时满足四个条件：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，超出部分直接露出来，省略号无从谈起；
没明确宽度，浏览器不知道“哪里算溢出”，text-overflow 就是摆设。
-
white-space: nowrap强制单行，是前提 -
overflow: hidden是裁剪开关，不是可选装饰 -
text-overflow: ellipsis只在前两者都满足时才起作用
常见失效场景和修复方式
写完样式却没省略号？大概率掉进这几个坑：
- 对原生
直接用：默认是 inline 元素，width不生效 → 改成display: inline-block或display: block - 父容器用了
flex，子项没设min-width: 0→ flex 项目默认不收缩，会撑宽 → 加上min-width: 0再套省略样式 - 用了
max-width: 100%但父级没宽度 → 父级得有确定宽度（比如width: 300px或flex-basis），否则100%算不出具体值 - 写了
line-height但没配height或padding→ 单行省略不依赖高度，但若容器高度被撑开，可能误判为“没溢出”
响应式和兼容性要点
在移动端或 flex/grid 布局里，要特别注意宽度来源是否可靠：
- 推荐优先用
max-width配合width: 100%，比纯width更适应弹性容器 - IE9+ 和所有现代浏览器都支持这组属性，但 IE8 及更早版本不支持
text-overflow: ellipsis - Safari 6 以下需加
-webkit-text-overflow: ellipsis，现在基本不用考虑 - 真机测试时注意 Webview 渲染差异：某些安卓低版本 Webview 对
white-space: nowrap解析不稳定，可加word-break: keep-all辅助
最简可用代码就是三行 CSS + 一个宽度声明，但真正卡住人的，永远是那个没显式写的 width，或是被 flex 悄悄接管的尺寸计算逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
