text-overflow: ellipsis在flex子项不生效的根本原因是默认min-width: auto阻止截断，必须显式设min-width: 0，并配合white-space: nowrap、overflow: hidden和宽度约束（非auto）及块级显示才能正常显示省略号。
text-overflow: ellipsis 在 flex 子项上不生效，八成是漏了 min-width: 0
这不是 bug，而是 Flex 规范明确的行为：每个 flex 子项默认有 min-width: auto，意思是“至少要宽到能完整显示内部文字”。哪怕父容器只剩 1px，它也拒绝压缩，overflow: hidden 根本没机会裁剪，text-overflow: ellipsis 就成了摆设。
你看到文字把盒子撑开、换行、或者直接溢出容器边缘，基本就是这个原因。删不掉 min-width: auto——它不是继承来的，是初始值，只能覆盖。
必须同时满足的四个条件，缺一不可
这四点得全落在实际承载文字的那个元素上（不是 flex 容器，也不是外层 wrapper）：
-
min-width: 0（或flex-shrink: 1，但min-width: 0更稳） overflow: hiddenwhite-space: nowrap-
width或max-width（不能是auto；百分比、rem、fit-content都行，但需有约束）
另外，如果文字容器原本是 span 这类 inline 元素，还得加 display: block 或 display: inline-block，否则 overflow 直接无效。
常见错位场景：min-width: 0 加错地方了
它必须加在文字所在、且是 flex 子项的那个元素上。比如：
.title {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
但如果 .title 里还套了一层 <span></span>，那 min-width: 0 得落到那个 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），否则text-overflow不触发 - 如果父容器是
flex-direction: column，要改的是min-height: 0，不是min-width
最常被忽略的其实是 min-width: 0 和 white-space: nowrap 的组合；很多人反复检查 text-overflow 拼写，却忘了这两个才是前置开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
