flex子项省略号失效的根本原因是min-width: auto阻止截断，需在文本元素上同时满足：min-width: 0、overflow: hidden、white-space: nowrap、width/max-width（非auto）且为块级元素。
flex子项默认min-width: auto阻止截断
根本不是text-overflow: ellipsis坏了，而是浏览器按Flex规范给每个子项设了min-width: auto——它强制子项至少撑开到文字自然宽度，哪怕容器再窄。你写了overflow: hidden和white-space: nowrap，它也根本不“溢出”，裁剪和省略号全被跳过。
常见现象包括：文字把父容器顶宽、换行却不截断、DevTools里看computed样式中min-width仍是auto。
-
min-width: 0是唯一能覆盖min-width: auto的标准写法（不能用0px或0%） -
flex-shrink: 1不等于可收缩——收缩底线仍是min-content宽度，min-width: auto没被覆盖时，它就卡死不动 - 别在父容器上加
min-width: 0，必须加在目标文本元素自身上
四个条件缺一不可，且必须作用于同一元素
text-overflow: ellipsis只负责“画点”，它不控制尺寸也不触发裁剪。真正起效靠的是四个硬性条件同时落在**文字所在的那个元素**上：
-
min-width: 0（或flex-basis: 0，但min-width: 0更稳） overflow: hidden-
white-space: nowrap（尤其注意：不能写在父级，否则子元素仍可能换行） -
width或max-width（不能是auto；百分比、rem、fit-content都行）
另外，该元素必须是块级：span等行内元素得先加display: block或display: inline-block，否则overflow: hidden直接无效。
含长单词或URL时仍溢出？补word-break: break-word
即使满足上述全部条件，纯英文、URL或无空格字符串（如https://example.com/very-long-path）仍可能撑开容器——因为浏览器默认不拆分这类内容。
此时需额外加：
-
word-break: break-word（Chrome 15+、Firefox 15+、Safari 9+ 支持） - 避免用
break-all，它会在任意位置断词，影响可读性 - 如果项目需兼容老版本IE，可考虑降级为
overflow: hidden+text-overflow: ellipsis+min-width: 0，但长URL仍可能失效
别信“套一层div就万事大吉”
有人图省事，直接在flex子项里包个<div>再加省略号样式。这确实能绕过<code>min-width: auto限制，但代价是DOM冗余、维护成本上升、响应式逻辑变复杂。
真正干净的做法是：确认目标元素本身已满足四条件，尤其检查DevTools的computed styles里min-width是否真为0px——很多问题其实就卡在这一步没验证。
复杂点不在规则多，而在所有条件必须精确落在同一个元素上，漏掉white-space: nowrap或误加在父级，都会让前面所有设置归零。
