必须在 flex 子元素上加 min-width: 0，否则 text-overflow: ellipsis 不生效；因子项默认 min-width: auto 强制撑开，导致 overflow: hidden 无法触发裁剪。
必须在 Flex 子元素上加 min-width: 0，否则 text-overflow: ellipsis 永远不会显示——这不是 bug，是 Flex 规范行为。
为什么只写 white-space: nowrap 和 overflow: hidden 不生效
Flex 子项默认有 min-width: auto（不是 0px），浏览器强制它至少撑开到最长单词或整段 URL 的自然宽度。哪怕父容器只有 100px，它也拒绝收缩，overflow: hidden 根本没机会裁剪，“溢出”这个前提都不存在，text-overflow: ellipsis 就纯属闲置。
常见现象包括：text-overflow: ellipsis 在 DevTools 里明明已声明，但页面完全不出现省略号；文字把容器顶宽、横向滚动、或意外换行（即使写了 white-space: nowrap）。
检查方法：打开 Chrome DevTools → Elements → Computed → 找 min-width，如果值仍是 auto（不是 0px），就是它。
min-width: 0 必须加在哪个元素上
它必须落在直接参与 Flex 排列的子元素上，且该元素得是块级（display: block 或 inline-block）。
- ✅ 正确：父容器
.list { display: flex; }，子项.item { flex: 1; min-width: 0; } - ❌ 错误：把
min-width: 0加在父容器.list上，或加在子项内部的<span></span>上 - ❌ 错误：用
min-width: 0px或min-width: 0%—— 只有无单位的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 子项常失效 - 该元素还需有明确宽度约束（如
max-width: 100%、width: 200px，或来自flex-basis） - 若原本是
<span></span>这类 inline 元素，必须先加display: block或display: inline-block
典型写法示例：
.item {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
Grid 布局下同样适用 min-width: 0
Grid 子项也默认 min-width: auto，逻辑和 Flex 完全一致：不加 min-width: 0，text-overflow: ellipsis 同样静默失效。修复方式一模一样——加在直接网格子元素上，配齐 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 和宽度约束。
容易被忽略的是：当 Flex 子项内部再嵌套 Flex，或 Grid 子项内部再嵌套 Grid，每一层参与布局的直接子元素都得各自加 min-width: 0，不能指望父层设置一次就透传到底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
