根本原因是Flex子项默认min-width:auto阻止收缩，必须显式设置min-width:0才能激活text-overflow:ellipsis；三属性需同作用于块级文本元素，且嵌套Flex需逐层设min-width:0。
根本不是 text-overflow: ellipsis 坏了，而是 Flex 子项默认 min-width: auto 锁死了收缩能力——不加 min-width: 0，其他样式全白配。
为什么只写 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 不生效
这三行代码本身完全正确，但它们依赖一个前提：元素得“真正溢出”才行。而 Flex 子项默认 min-width: auto，浏览器会优先保全文本完整显示，哪怕内容远超容器宽度，也宁可撑开父容器或横向滚动，绝不主动压缩自己。结果就是：overflow: hidden 没东西可裁，text-overflow: ellipsis 更没机会渲染。
常见现象包括：
- 文字把整个 Flex 容器顶宽，甚至导致页面横向滚动
- DevTools 的 Computed 面板里
min-width仍是auto - 同一段 CSS 挪到普通
div里立刻正常，一放进 Flex 就失效
必须在目标文本元素上加 min-width: 0
min-width: 0 是唯一能覆盖默认 min-width: auto 的写法，它不是设“最小宽度为 0px”，而是告诉 Flex 布局：“允许我缩到比内容还小”。这个动作是后续所有截断逻辑的起点。
关键细节：
- 必须加在**直接包裹文本的元素上**（比如
.title、.desc），不是 Flex 父容器（如.item） - 只能用
min-width: 0（无单位），min-width: 0px或min-width: 0%在部分浏览器中不可靠 - Firefox 对
min-width: auto执行更严格，Chrome 有时“悄悄妥协”，但别依赖这种差异 - 如果子项用了
flex: 1，更要加——因为flex: 1默认等价于flex: 1 1 0%，其中0%是模糊的百分比基准，不如flex: 1 1 0明确
三件套必须同级、同块、同元素
white-space: nowrap、overflow: hidden、text-overflow: ellipsis 必须同时作用于同一个块级元素，且该元素需满足：
- 是块级（
display: block或display: inline-block；行内元素如span默认不生效） - 有明确宽度上下文（来自父容器约束、
max-width或flex-basis） - 不能被内部嵌套的
display: flex或display: table干扰——这些显示类型自带最小宽度逻辑，优先级高于min-width: 0
含长 URL 或连续英文单词时，还需补 word-break: break-word，否则浏览器仍按单词整体计算最小宽度。
嵌套 Flex 场景下容易漏掉的点
真实项目里，失效常发生在多层嵌套中。例如一个卡片 .card 是 Flex 容器，里面有个信息块 .info 也是 display: flex，再里面才是 .text。这时：
- 仅给
.text加min-width: 0不够——.info作为中间层 Flex 子项，同样受min-width: auto限制，会把溢出“传上去” - 必须逐层检查：只要某元素是 Flex 直接子项，且内容宽度不确定，就该加
min-width: 0 - 若某层用了
flex: 0 1 auto，也一样要加——flex-shrink: 1不等于允许收缩到小于内容宽度，min-width: auto仍在起效
最稳的做法：打开 DevTools，选中目标文本元素，在 Computed 面板确认 min-width 真实值是 0px，而不是被其他规则覆盖或回退成 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
