min-width: 0是绕不开的第一步，因Flex子项默认min-width: auto（即内容最小宽度），会阻止收缩；必须显式设为0才能解除该限制，使white-space: nowrap、overflow: hidden和text-overflow: ellipsis协同生效。
只加 min-width: 0 不会自动让文字变省略号，它只是打开收缩开关——后续必须配齐 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis，且全部写在同一元素上。
为什么 min-width: 0 是绕不开的第一步
Flex 子项默认 min-width: auto，不是 0，也不是你写的 width 值，而是浏览器按内容最长不可折行片段（比如一个无空格 URL 或 base64 字符串）算出的「最小内容宽度」。这个值是 flex-shrink 的硬性下限：哪怕容器只剩 1px 宽，子项也宁可溢出，绝不缩得比它小。
min-width: 0 的作用不是“压扁元素”，而是显式覆盖掉那个隐式限制，把收缩下限重置为 0，让 flex-shrink 真正开始工作。不加这句，后面三件套全白搭。
- 必须加在直接承载文本的 flex 子项上，比如
.item > span，而不是父容器.container或嵌套的div - 写成
min-width: 0px或min-width: 0%在部分旧版 Safari 或 Firefox 中可能失效，只用min-width: 0（无单位）最稳 - DevTools 里检查 computed 样式，确认
min-width真实值已变成0px，而非被min-width: fit-content等规则覆盖
text-overflow: ellipsis 不生效？缺了这三样就卡死
text-overflow: ellipsis 是纯装饰层，不参与尺寸计算，只在满足所有前置条件时才画点。漏掉任意一个，效果就消失：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap：必须写在目标元素上，不能靠父级继承；否则文字提前换行，根本没机会“单行溢出” -
overflow: hidden：只裁剪“已溢出”的内容；若min-width: auto还在锁着宽度，容器就被撑大，文本根本没溢出，这行 CSS 就等于没执行 -
text-overflow: ellipsis：仅对块级或inline-block元素有效；行内元素如span需先加display: block
常见翻车点：overflow: hidden 单独加在父容器上，但子项仍按自身内容宽度撑开——你看到的是被顶开的盒子，不是被截断的文本。
含图片、URL 或嵌套 Flex 时怎么处理
min-width: 0 对普通文本容器够用，但遇到替换元素或复杂结构，还需额外干预：
-
<img>：除了min-width: 0，必须加max-width: 100%，否则原始尺寸照常撑开；flex-shrink: 0是更彻底的禁缩方案 - 长 URL 或连续英文单词：即使加了上述所有，仍可能撑开；需补充
word-break: break-word或overflow-wrap: break-word - 嵌套 Flex（如头像 + 文字块再包一层
display: flex）：内层 flex 容器同样有min-width: auto，必须在外层子项和内层子项都加min-width: 0，否则溢出会“穿透”进来 - 用了
flex: 1缩写？它等价于flex: 1 1 0%，其中flex-basis: 0%在某些场景下不如flex: 1 1 0可控，后者强制从 0 开始分配空间，配合min-width: 0更稳
父容器没设宽，加啥都没用
Flex 容器自身若没明确宽度上下文（比如没设 width、max-width 或受祖先限制），子项再怎么缩也没意义——因为“剩余空间”是无限的。
- 横向滚动区域：父容器要设
width: 100%+overflow-x: auto，子项推荐flex: 0 0 auto+min-width: 0 - 移动端卡片布局：外层容器建议用
max-width而非固定width，避免小屏下撑破 - 别在 flex 子项里写
width: 100%，它和flex: 1冲突，优先级混乱
真正起效的链条是：父容器尺寸受限 → 子项 min-width: 0 允许压缩 → overflow: hidden 触发裁剪 → text-overflow: ellipsis 渲染省略号。少一环，就白加。
