必须加min-width: 0才能触发text-overflow: ellipsis，因flex子项默认min-width: auto强制保内容完整，导致overflow: hidden无溢出可裁；该声明须作用于直接参与弹性布局的块级文本容器，并配合white-space: nowrap、overflow: hidden、max-width及display: block。
直接加 min-width: 0，否则 text-overflow: ellipsis 永远不会出现——这不是兼容性问题，是 Flex 规范行为。
为什么 flex 子项上写了 white-space: nowrap + overflow: hidden 还是不省略
浏览器看到 flex 子项默认的 min-width: auto，就认定“这内容必须完整显示”，哪怕父容器只剩 50px 宽，它也拒绝收缩。结果是：overflow: hidden 根本没东西可裁，text-overflow: ellipsis 更无从触发。
- DevTools 的 Computed 面板里查
min-width，若仍是auto（不是0px），就是它 -
white-space: nowrap必须写在目标文本元素上，不能只写在父容器；否则子元素仍可能换行 - 如果该元素是
<span></span>这类 inline 元素，得先加display: block或display: inline-block
min-width: 0 必须加在哪一层
必须加在「直接参与 Flex 排列的子元素」上，且该元素得是块级、承载最终文本的容器。
- ✅ 正确：
.item { display: flex; }→.item > .text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - ❌ 错误：把
min-width: 0加在.item父容器上，或加在.text内部的<span></span>上 - ⚠️ 嵌套 Flex 场景下，内层
display: flex的直接子元素（比如.text）也得单独加min-width: 0，父级的设置不继承 - 别用
min-width: 0px或min-width: 0%—— 只有无单位的min-width: 0是标准写法，Firefox 对非标准写法更敏感
flex: 1 和 flex: 1 1 0 的区别影响省略号是否生效
flex: 1 等价于 flex: 1 1 0%，其中 flex-basis: 0% 会让宽度计算异常，尤其在文字容器上容易导致 text-overflow 失效。
- 推荐显式写成
flex: 1 1 0（注意是数字0，不是0%） - 如果该子项还设了
flex-shrink: 0，min-width: 0会被无视——删掉或改成flex-shrink: 1 - 宽度约束（如
max-width: 100%）必须和min-width: 0、text-overflow等一起落在同一元素上，否则“溢出”前提不成立 - 长 URL 或 JWT token 这类无空格文本，还得额外加
overflow-wrap: break-word，否则省略号照样不触发
最容易被忽略的是：嵌套 Flex 中，min-width: 0 不会穿透到内层容器；你得一层一层手动加，直到最内层承载文本的块级元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
