text-overflow: ellipsis在Flex子项不显示，90%因min-width: auto阻止收缩；必须在Flex直接子元素上同时设置min-width: 0、white-space: nowrap、overflow: hidden、明确宽度约束（如max-width: 100%），且该元素须为块级。
Flex子项上text-overflow: ellipsis不显示，90%是min-width: auto在拦着
浏览器给每个 Flex 直接子元素默认加了 min-width: auto（主轴为 row 时），它会锁死最小宽度不小于内容自然宽——哪怕你写了 overflow: hidden 和 white-space: nowrap，文字也照撑不误，根本没“溢出”这回事。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生效必须凑齐的四件套
text-overflow: ellipsis 不是开关，它只负责“画点”，前提是元素满足四个硬性条件，且全部写在同一块级元素上：
-
min-width: 0：解除 Flex 子项“拒绝收缩”的锁（横向布局） -
white-space: nowrap：必须写在这里，不能靠继承；否则文字提前换行，“单行溢出”前提不成立 -
overflow: hidden：裁剪动作本身，但缺min-width: 0时对 Flex 子项常失效 - 明确的宽度约束：
width、max-width（如max-width: 100%）、或可靠的flex-basis；仅靠flex: 1不行，它的计算结果仍是auto
漏掉任意一个，text-overflow: ellipsis 都不会出现，也不报错。
嵌套Flex里省略号失效，问题出在“哪一层”加min-width: 0
典型结构：.list { display: flex; } → .item { display: flex; } → .text { ... }。很多人在外层 .item 加了 min-width: 0，但 .text 仍是内层 Flex 的直接子项，它自己也带 min-width: auto，照样撑开。
- 必须把
min-width: 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis全部落在**最终承载文本的块级元素**上（比如.text） - 确保该元素是块级：
display: block或display: inline-block；span默认是 inline，不响应text-overflow - 如果
.text上还写了flex-shrink: 0，min-width: 0会被无视——删掉或改成flex-shrink: 1
长URL或连续英文单词撑开容器，光靠text-overflow不够
即使四件套全齐，https://example.com/very-long-path 这类无空格字符串仍会撑破容器——因为浏览器默认不拆分单词。
- 先加
min-width: 0解锁收缩权限 - 再加
max-width: 100%（或其他具体值），给换行提供参照宽度 - 最后加
overflow-wrap: break-word（旧名word-wrap: break-word兼容性更好） - 避免和
word-break: break-all混用——后者会在任意字符间切分，破坏可读性
真正容易被忽略的，不是“怎么写”，而是“谁在控制宽度”：父容器是否用了 fit-content、是否设了 flex-grow 却没配 max-width、甚至 display: contents 这类隐式影响——它们都会悄悄破坏宽度约束，让整个组合失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
