flex子项需加min-width: 0才能触发text-overflow: ellipsis，因其默认min-width: auto会阻止压缩；同时须满足width/max-width、white-space: nowrap、overflow: hidden三条件。
flex容器里文字不省略？先看min-width 0有没有加
默认情况下，flex子项会尽可能撑开，哪怕内容超长也不触发text-overflow: ellipsis。根本原因是 flex 项的默认最小宽度是auto（即内容最小宽度），它会“拒绝”被压缩到小于文本自然宽度，于是overflow: hidden和text-overflow直接失效。
解决方法就是显式告诉它：可以缩到0。这不是hack，而是CSS规范明确要求的配合项。
-
min-width: 0必须加在 flex 子项（即文字所在元素）上，不是父容器 - 只加
overflow: hidden或text-overflow: ellipsis没用，三者缺一不可 - 如果子项是
inline元素（比如span），得先设display: block或inline-block，否则overflow不生效
text-overflow: ellipsis生效的三个硬性条件
这个属性看着简单，但漏掉任意一个条件就会静默失败——既不报错，也不显示省略号。
- 元素必须有明确的
width或max-width（百分比、px、rem 都行，但不能是auto） - 必须同时设置
white-space: nowrap（单行省略）或white-space: normal+display: -webkit-box（多行省略，另说） - 必须有
overflow: hidden，且父级不能有overflow: visible穿透干扰
常见错误：flex容器设了width: 100%，但子项没设width，此时子项宽度仍是auto，text-overflow照样不干活。
flex布局中该在哪一层加min-width: 0
加错层级是高频翻车点。比如你写的是：
.container { display: flex; }
.item { flex: 1; } /* 这里是文字容器 */
那min-width: 0必须落在.item上，而不是.container。如果.item内部还包了一层div或span放文字，那min-width: 0得继续下沉到那个最内层块级元素。
- 检查 computed styles：看目标元素的
min-width是否真为0px，别信声明，信渲染引擎算出来的值 - 用 Chrome DevTools 的 Layout 界面，勾选“Show flex overlay”，能直观看到每个 flex 项是否被压缩
- 如果用了
flex: 0 1 auto这类缩写，它隐含min-width: auto，必须显式覆盖
IE11和旧版Safari对flex+ellipsis的支持差异
IE11 要求min-width: 0，但还额外卡一个点：flex 子项必须是块级元素，display: inline或inline-flex直接不认text-overflow。Safari 10–12 在某些嵌套 flex 场景下会忽略min-width: 0，得补max-width: 0再加flex-basis: 0来强制收缩。
- 稳妥写法（兼顾老浏览器）：
min-width: 0; max-width: 100%; flex-basis: 0; - 不要依赖
flex: 1这种简写，它在不同浏览器里展开逻辑略有出入 - 移动端 iOS Safari 15.4+ 已基本对齐标准，但微信内置浏览器（X5内核）仍可能表现异常，建议实机测试
真正麻烦的从来不是写几行CSS，而是当你改了min-width却没效果时，得一层层确认：是不是样式被覆盖了，是不是元素类型不对，是不是父容器溢出没截住——这些细节不手动 inspect 就永远卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
