CSS Flex中省略号不显示的根本原因是flex子项默认min-width: auto阻止截断，必须在文本元素上同时满足：min-width: 0、overflow: hidden、white-space: nowrap、width/max-width（非auto）且为块级元素。
根本不是 text-overflow: ellipsis 坏了，而是 flex 子项默认的 min-width: auto 把它拦死了——文字压根没“溢出”，裁剪和省略号全被跳过。
flex 子项上必须加 min-width: 0
这是唯一能覆盖浏览器默认 min-width: auto 的写法。它不是设“最小宽度为 0”，而是告诉 flex 布局：“允许我缩到比内容还小”。漏掉这句，其他样式全是摆设。
-
min-width: 0px或min-width: 0%都不行，只有无单位的min-width: 0是标准且兼容稳定的写法 - 别加在父容器上，必须加在**那个要显示省略号的文本元素本身**（比如
.title或span） - 在 Firefox 中尤其明显：Chrome 有时“悄悄妥协”，Firefox 会严格执行
min-width: auto，导致省略号彻底消失
white-space: nowrap 必须写在文本元素上
很多人误以为父容器设了 flex-wrap: nowrap 就够了，其实完全不相关。这个属性只对当前元素生效，且必须作用于文字容器本身，否则文字提前换行，“单行溢出”前提直接崩塌。
- 如果文本容器是
span这类行内元素，还得先加display: block或display: inline-block，否则overflow: hidden无效 - 在 Safari 或部分安卓 Webview 中，
white-space: nowrap若被继承或覆盖，会导致省略号位置偏移甚至不显示 - 别用
-webkit-line-clamp替代——它是多行截断逻辑，与white-space: nowrap冲突，实际中容易引发不可预测换行
width/max-width 不能是 auto
flex 子项若没显式宽度约束，即使满足前两项，浏览器仍可能按内容撑开，overflow: hidden 无法触发。
-
width: 100%在 flex 场景下风险高：若父容器宽度未固定（比如嵌套 flex 或 inline 容器），它可能解析为auto - 更稳妥的是用
max-width: 100%、max-width: fit-content或具体值（如max-width: 200px） - 含长 URL 或无空格英文串时，即使满足全部条件，仍可能撑开——此时补
word-break: break-word（别用break-all，影响可读性）
DevTools 里必须验证 computed min-width 是 0px
很多问题卡在这一步没验证。你写了 min-width: 0，但样式被更高优先级规则覆盖，或者加错层级，computed 值仍是 auto，那整个链路就断了。
- 打开 Chrome DevTools → Elements → 右侧 Computed → 搜
min-width，确认它显示的是0px，不是auto - 四个条件：
min-width: 0、overflow: hidden、white-space: nowrap、width/max-width（非auto），必须全部落在**同一个块级元素**上 - 别图省事套一层
div——DOM 冗余、响应式逻辑变复杂，真问题还是没解决
真正难的不是记规则，而是所有条件必须精确落在同一元素上，漏一个、加错层、或只靠 DevTools 看样式表却不查 computed 值，都会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
