根本原因是flex子项默认min-width: auto阻止收缩，必须显式设min-width: 0，并配合white-space: nowrap、overflow: hidden和块级显示才能触发text-overflow: ellipsis。
为什么text-overflow: ellipsis在Flex里不显示省略号
根本不是text-overflow: ellipsis坏了，而是Flex子项默认min-width: auto，浏览器强制它至少撑开到最长单词或整段文本的自然宽度——压根没“溢出”，overflow: hidden和text-overflow: ellipsis就全被跳过。
常见现象包括：文字把容器顶宽、换行却不截断、加了三件套但省略号死活不出现。DevTools里看computed min-width如果还是auto，基本就是这个原因。
-
white-space: nowrap必须有，否则文字提前折行，连“单行溢出”前提都不满足 -
overflow: hidden单独加没用，它只裁剪“已溢出”的内容，而min-width: auto让它根本溢不出 -
text-overflow: ellipsis是纯装饰层，不参与尺寸计算，依赖前两者生效
必须加min-width: 0，且只能加在目标子元素上
min-width: 0是唯一能覆盖浏览器默认min-width: auto的写法。它不是“设最小宽度为 0”，而是告诉Flex布局：“允许我缩到比内容还小”，从而让flex-shrink真正起作用。
注意：flex: 1默认等价于flex: 1 1 0%，其中0%是flex-basis，不是min-width；就算flex-basis是0，只要min-width还是auto，子项照样不缩。
- 把
min-width: 0加在父容器（如.container）上——完全无效，必须写在目标文本子项上 - 用
min-width: 0%或min-width: 0px混用——只有min-width: 0（无单位）是标准写法，兼容性最稳 - Firefox中漏设它——Firefox对
min-width: auto执行更严格，Chrome有时“悄悄妥协”，但别依赖
三件套必须同时作用于同一块级元素
text-overflow: ellipsis不是“开关”，它只在满足三个硬性条件时才画省略号：
-
white-space: nowrap：必须写在这里，不能写在父级；否则文字提前折行，根本没机会溢出 -
overflow: hidden：裁剪动作本身，但若没min-width: 0，它对Flex子项常失效 -
text-overflow: ellipsis：只负责渲染省略号，不控制溢出行为
三者必须写在同一元素上，且该元素需为块级（如<div>、<code><p></p>），需先加display: block（行内元素如<span></span>默认不生效）。
含URL或长单词时额外加word-break: break-word：纯英文、URL、无空格字符串（如https://example.com/very-long-path-with-no-spaces）即使加了上述所有规则，仍可能撑开容器——因为浏览器默认不拆分这类字符串。此时需补充word-break: break-word（Chrome 15+、Firefox 15+、Safari 9+）。
flex: 1 1 0比flex: 1更可靠
flex: 1展开为flex: 1 1 0%，其中flex-basis: 0%会让浏览器按百分比计算初始宽度，容易导致文字容器宽度计算异常，text-overflow失效。
改用flex: 1 1 0（注意是数字0，不是0%）：等价于flex-basis: 0px，强制从零开始均分剩余空间，配合min-width: 0能稳定触发收缩逻辑。
- 别用
flex: 0 1 200px这类带固定flex-basis的写法，它会卡死收缩起点，小屏下反而更容易溢出 - 想保留内容基础宽度又允许压缩？用
flex: 1 1 auto+min-width: 0，比硬设min-width: 200px更适应响应式 - 父容器宽度约束常被忽略：再怎么给子项加
min-width: 0和截断三件套，如果父容器本身没宽度限制（比如只写了display: flex，没设width、max-width），照样白搭
嵌套Flex结构最容易漏——比如头像+信息块组合，外层加了min-width: 0，但内层信息块也是Flex容器且含长文本，同样需要加。逐层检查才是关键，不是加一次就万事大吉。
