text-overflow: ellipsis在Flex子项中生效必须同时满足四个条件：min-width: 0（解除默认min-width: auto锁定）、white-space: nowrap、overflow: hidden和明确宽度约束（如max-width或flex: 1），且四者须同级作用于文字所在块级元素。
flex子项加min-width: 0才能触发text-overflow: ellipsis
Flex子项默认min-width: auto，会“锁住”最小宽度为内容本身宽度，哪怕父容器空间不足，它也不缩——于是overflow: hidden和text-overflow: ellipsis全失效。这不是bug，是规范行为。
必须把min-width: 0加在**文字所在的那个子元素上**（比如<div>或<code><p></p>），不是父display: flex容器。
-
min-width: 0比width: 0更符合语义，且兼容性更好（width: 0在某些旧Android WebView里有渲染异常） - 如果子项是
<span></span>这类inline元素，得先加display: block或display: inline-block，否则overflow不生效 - 仅设
min-width: 0不够，它只是“解锁压缩权限”，后面还得配齐另外两个硬条件
text-overflow: ellipsis生效的三个硬性条件缺一不可
这三个条件必须同时满足，漏一个就静默失败：没报错、没警告、省略号就是不出现。
- 元素要有明确的宽度约束：
width: 100%、max-width: 300px、flex: 1（隐式提供收缩能力）都算；但width: auto不行 -
white-space: nowrap：强制单行，否则文本换行后text-overflow不触发 -
overflow: hidden：必须作用于同一元素，且父级不能有overflow: visible穿透干扰（比如父容器设了overflow: visible，会盖掉子项的hidden）
常见错误：flex容器设了width，但子项没约束宽度
比如父容器.list { display: flex; width: 100%; }，子项只写了flex: 1却没加min-width: 0或width: 100%——此时子项宽度仍是auto，浏览器根本不知道“超出”从哪算起。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - 如果子项还用了
padding或border，记得确认box-sizing: border-box，否则width: 100%可能撑出父容器 - 在Safari 14–15中，
flex: 1+min-width: 0偶尔不稳定，可补一句max-width: 100%兜底
为什么display: flex父容器里text-overflow特别容易失效
因为flex布局的收缩逻辑和普通块流不同：它先按内容宽度分配空间，再根据flex-shrink决定是否压缩。而min-width: auto让这个“内容宽度”变成整段文本长度，直接堵死了压缩路径。
实际调试时，用浏览器开发者工具检查子项的computed width——如果显示的是一个远大于父容器的像素值（比如842px），基本就是min-width: auto在作祟。改掉它，宽度立刻回落到可用空间内，省略号自然出现。
