text-overflow: ellipsis在flex子项不显示，90%是缺min-width: 0；必须在文本容器上同时设置min-width: 0、white-space: nowrap、overflow: hidden、明确宽度（如flex: 1 1 0），且均为块级元素。
flex子项上text-overflow: ellipsis不显示，90%是缺min-width: 0
浏览器对 flex 子项默认施加 min-width: auto，它强制元素至少撑开到最长单词或整段 URL 的自然宽度。哪怕你写了 white-space: nowrap 和 overflow: hidden，只要这个锁没解开，文字就根本不会“溢出”，text-overflow: ellipsis 就纯属闲置。
检查方法：打开 Chrome DevTools → Elements → Computed → 搜 min-width，如果值仍是 auto（不是 0px），就是它。
-
min-width: 0必须写在参与 flex 排列的直接子元素上，不能写在父容器或孙子节点 - 只能用无单位的
min-width: 0；min-width: 0px或min-width: 0%在 Firefox 中可能被忽略 - 如果该子项本身也是
display: flex容器，其内部真正承载文本的元素还得再加一遍min-width: 0
四件套必须同级、同时作用于同一块级元素
text-overflow: ellipsis 不是开关，它只在满足全部硬性条件时才画点。漏掉任意一个，样式就白写。
-
min-width: 0：解除 flex 子项“拒绝收缩”的锁 -
white-space: nowrap：必须写在这里，不能靠继承；否则文字提前折行，“单行溢出”前提不成立 -
overflow: hidden：裁剪动作本身，但若没min-width: 0，它常对 flex 子项失效 - 明确宽度约束：如
flex: 1 1 0、max-width: 100%或固定值；flex: 1等价于flex: 1 1 0%，容易导致宽度计算异常，建议显式写flex: 1 1 0 - 若原是
span等 inline 元素，必须先加display: block或display: inline-block，否则overflow直接无效
嵌套 flex 场景下，第二层 min-width: 0 容易被漏掉
典型结构：.item 是外层 flex 子项，里面套了 .content-wrapper { display: flex; }，而文本在 .content-wrapper > .text 里。此时仅给 .item 加 min-width: 0 是不够的——.content-wrapper 自己也受 min-width: auto 锁定。
-
min-width: 0必须显式写在最终文本容器（即内层 flex 的直接子元素）上，不能靠继承 - 如果该文本容器还设了
flex-shrink: 0，min-width: 0会被无视，得删掉或改成flex-shrink: 1 - 旧版 Safari（≤15.6）对
flex: 1 + min-width: 0组合支持不稳定，建议用flex: 1 1 0替代
长单词/URL 撑开容器？overflow-wrap: break-word 是兜底方案
即使配齐四件套，https://example.com/very-long-path 这类无空格字符串仍会撑开——因为浏览器默认不拆分单词。这时 overflow-wrap: break-word 才真正起作用，但它有个前提：容器得先被允许压缩。
- 顺序不能错：先加
min-width: 0解锁收缩权限 → 再加max-width: 100%提供换行参照 → 最后加overflow-wrap: break-word - 避免和
word-break: break-all混用；后者会在任意字符间切分，破坏可读性 - 移动端小屏下，
min-width: 0必须配合max-width: 100%，否则 flex 子项在flex-direction: column里仍可能水平溢出
复杂点在于：所有条件都得落在**同一个元素**上，且每个值都得在 Computed 面板里确认为真实生效（比如 min-width: 0px、flex-basis: 0px、white-space: nowrap），少一个，省略号就出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
