text-overflow: ellipsis在flex子项不生效，根本原因是默认min-width: auto阻止截断；必须显式设置min-width: 0，并配合white-space: nowrap、overflow: hidden和块级显示才能正常显示省略号。
text-overflow: ellipsis 在 flex 子项上不生效，八成是因为漏了 min-width: 0 —— 它不是可选项，而是触发省略号的必要条件之一。
为什么 flex 子项加了 text-overflow: ellipsis 还是不显示省略号
浏览器默认给每个 flex 子项设了 min-width: auto，意思是“至少要宽到能完整显示内部文字”。哪怕容器很窄，它也拒绝压缩，overflow: hidden 根本没机会裁剪，text-overflow: ellipsis 就成了摆设。
这不是 bug，是 flex 规范里明确的行为。你看到文字把盒子撑开、换行、或者直接溢出容器边缘，基本就是这个原因。
-
min-width: auto是 flex 子项的初始值，不是继承来的，删不掉，只能覆盖 - 只加
overflow: hidden和white-space: nowrap不够，它们依赖宽度被真正限制住 - 用 Chrome DevTools 查看 computed styles，确认目标元素的
min-width确实是0px，别只看样式表里有没有写
必须同时满足的四个条件（缺一不可）
要让 text-overflow: ellipsis 在 flex 布局中起作用，这四点得全落在**文字所在的那个元素**上：
-
min-width: 0（或flex-shrink: 1，但min-width: 0更稳） overflow: hiddenwhite-space: nowrap-
width或max-width（不能是auto；百分比、rem、fit-content都行，但需有约束）
注意：display: block 或 display: inline-block 也得有——如果文字容器原本是 <span></span> 这类 inline 元素，不加这一条，overflow 直接无效。
min-width: 0 该加在谁身上？常见错位场景
它必须加在**实际承载文字、且是 flex 子项的那个元素**上，不是 flex 容器，也不是外层 wrapper。
- 写法示例：
.title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - 如果
.title里还套了一层<span></span>，那min-width: 0得落到那个<span></span>上，同时它还得有display: block - React/Vue 里用动态 class 控制截断时，容易只把
text-overflow相关规则放进.truncate，却忘了把min-width: 0也包进去 - 用了
flex: 0 1 auto这类缩写？它隐含min-width: auto，必须显式覆盖
移动端和旧浏览器的兼容性注意点
现代浏览器（Chrome/Firefox/Edge/Safari 13+）对 min-width: 0 支持很好，但 IE11 和 Safari 10–12 仍有细节差异：
- IE11 要求文字容器必须是块级（
display: block），inline或inline-flex会直接忽略text-overflow - Safari 10–12 在嵌套 flex 场景下有时会无视
min-width: 0，可补max-width: 0+flex-basis: 0强制收缩 - 响应式布局中慎用固定
min-width（比如min-width: 200px），小屏下反而撑破布局
最稳妥的底线：只要 flex 子项要单行截断，就无条件加上 min-width: 0，别等它出问题再查。它不起眼，但缺了就整个逻辑链断掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
