text-overflow: ellipsis在flex子元素不生效，90%因漏设min-width: 0；必须在直接flex子项上设置min-width: 0（无单位），并配合white-space: nowrap、overflow: hidden、明确宽度及块级显示才能触发省略号。
text-overflow: ellipsis 在 Flex 子元素上不显示省略号，90% 是因为漏了 min-width: 0 —— 它不是可选项，是激活截断逻辑的开关。
为什么只写 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 不生效
这三行本身完全正确，但它们依赖一个前提：元素得“真正溢出”才行。而 Flex 子项默认 min-width: auto，浏览器强制它至少撑开到最长单词或整段 URL 的自然宽度。哪怕父容器只有 100px，它也拒绝收缩，overflow: hidden 根本没东西可裁，text-overflow: ellipsis 就纯属闲置。
- 常见现象包括：
text-overflow: ellipsis在 DevTools 里明明已声明，但页面完全不出现省略号；文字把容器顶宽、横向滚动、或意外换行（即使写了white-space: nowrap） - 检查方法：打开 Chrome DevTools → Elements → Computed → 找
min-width，如果值仍是auto（不是0px），就是它 - 这不是 bug，是 Flex 规范行为：所有现代浏览器（Chrome/Firefox/Edge/Safari 13+）都这样执行
必须在哪个元素上加 min-width: 0
它必须落在直接参与 Flex 排列的子元素上，且该元素得是块级（display: block 或 display: inline-block）。不是父容器，也不是子项内部的 wrapper。
- ✅ 正确：
.item { display: flex; }下的.title { flex: 1; min-width: 0; } - ❌ 错误：把
min-width: 0加在.item父容器上，或加在.title > span上却忘了给span加display: block - ❌ 错误：
min-width: 0px或min-width: 0%—— 只有无单位的min-width: 0是标准写法，Firefox 对非标准写法更严格 - ⚠️ 注意：如果子项内部还嵌套了
display: flex的容器（比如.info { display: flex; }包着.text），那个内层容器也得单独加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%、200px）或来自flex-basis；不能是auto或靠内容撑开 - 如果原本是
span这类 inline 元素，必须先加display: block或display: inline-block
典型写法示例：
.title {
flex: 1 1 0;
min-width: 0;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Flex 布局中容易被忽略的宽度上下文问题
再怎么给子项加 min-width: 0 和三件套，如果父容器本身没宽度限制（比如只写了 display: flex，没设 width、max-width，或外层是 fit-content），整个 flex 容器就会无限宽，子项再怎么缩也没意义。
- 父容器需有明确宽度约束：来自外层布局（如
width: 300px）、max-width，或受 grid/flex 父级限制 - 避免用
flex: 1直接套在文字容器上——它等价于flex: 1 1 0%，其中0%在宽度推导中易引发异常；显式写成flex: 1 1 0（数字 0，不是0%）更可控 - 含长 URL 或连续英文单词时，还需补
word-break: break-word，否则浏览器仍按单词整体计算最小宽度
真正麻烦的不是记不住语法，而是不同约束互相打架：比如 min-width: 0 解决了收缩，但若父容器宽度没封死，一切还是白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
