必须加min-width: 0才能触发text-overflow: ellipsis，因flex子项默认min-width: auto会锁死收缩，使溢出前提不成立；该值必须无单位、写在直接承载文本的块级子元素上，并与white-space: nowrap、overflow: hidden、text-overflow: ellipsis及宽度约束同级生效。
flex子项默认min-width: auto锁死收缩
根本不是text-overflow: ellipsis坏了，而是它压根没机会触发。Flex子项默认min-width: auto，浏览器会按最长单词或整段URL的自然宽度，给它划一条“最低宽度线”。哪怕你写了white-space: nowrap和overflow: hidden，它也优先撑开、拒绝裁剪——“溢出”这个前提都不存在，省略号当然不画。
DevTools里看Computed面板，如果min-width值仍是auto（不是0px），就是它在拦着。
-
min-width: 0必须写在直接参与Flex排列的子元素上，不能写在父容器或内部嵌套元素上 - 不能写成
min-width: 0px或min-width: 0%——只有无单位的min-width: 0是规范写法，Firefox尤其敏感 - 如果该子项还设了
flex-shrink: 0，min-width: 0会被无视，得删掉或改回flex-shrink: 1
四件套必须同级落在块级文本容器上
text-overflow: ellipsis只对块级元素生效，且必须和另外三个条件共存：强制单行、裁剪溢出、明确宽度约束。缺一不可，且必须全部写在同一元素上。
- 目标元素得是
display: block或display: inline-block——span等行内元素默认不行，得先加display: block -
white-space: nowrap必须写在这里，不能只写在父级；否则文字提前换行，“单行溢出”前提就崩了 -
overflow: hidden只负责隐藏，不解决“为何不溢出”，所以必须配min-width: 0 - 还得有宽度约束：
max-width: 100%、width: 200px，或来自flex-basis（比如flex: 1 1 0里的0）
嵌套Flex中省略号失效的典型陷阱
外层.item加了min-width: 0，里面再套一层display: flex的头像+文字块，文字照样撑开——因为内层Flex容器自己也有min-width: auto，外层的设置管不到它。
- 省略号逻辑必须落在**最终承载文本的块级元素上**，且该元素要是内层Flex的**直接子元素**
- 比如：
.item > .content-wrapper { display: flex; }→.content-wrapper > .text，那.text就得单独加min-width: 0 - 如果
.text还用了flex: 1但没配min-width: 0，旧版Safari（≤15.6）大概率失效 - 长URL或JWT token这类无空格文本，还需叠加
overflow-wrap: break-word或word-break: break-all兜底
flex: 1 1 0里的0不是可有可无的占位符
flex: 1等价于flex: 1 1 0%，而0%不会覆盖min-width: auto，导致收缩底线仍是内容宽度。真正起效的是flex: 1 1 0（注意是数字0，无单位）。
-
flex-basis: 0能间接达成类似min-width: 0的效果，但不如后者直白、兼容性好 - 别指望
overflow: hidden单独破局——它只是“关门”，min-width: 0才是“把门框变小” - 表格场景是另一回事：
table-layout: fixed+td显式width才可能让text-overflow走通
0，以及它必须落在哪一层——不是“写了就行”，而是“写在对的地方、对的元素、对的写法”才算真正落地。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
