必须显式设置min-width: 0才能让white-space: nowrap下的flex子项正常收缩并支持text-overflow: ellipsis，否则min-width: auto会锁定最小宽度导致溢出。
Flex子项加了white-space: nowrap却撑开父容器
这不是white-space: nowrap的错，而是它和Flex默认行为叠加的结果：子项被锁在min-width: auto底线，无法收缩到比“最长不可折行内容”更小的宽度。
比如一个span里塞了UserProfileSettingsButton这种无空格长串，浏览器算出它的“最小内容宽度”就是这整串像素宽；哪怕父容器只有200px，子项也宁可溢出，绝不缩。
-
min-width: auto是Flex子项的隐式默认值，不是你写的width，也不是0 - 必须显式写
min-width: 0（无单位）来覆盖它，这是所有后续操作的前提 - 检查DevTools的computed样式，确认
min-width真实值已变成0px，而非被其他规则覆盖 - 旧版Safari或Firefox中，
min-width: 0px或min-width: 0%可能失效，只用min-width: 0
text-overflow: ellipsis不显示省略号
它只是“画点”的装饰层，不参与尺寸计算。漏掉任意一个前置条件，就彻底失效。
- 四件套必须全部写在同一元素上：
min-width: 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis -
white-space: nowrap不能靠父级继承，必须直接写在承载文本的元素上（如.item > span） -
text-overflow只对块级元素生效，span等行内元素需加display: block或display: inline-block - 把
overflow: hidden只加在父容器上，子项仍按自身内容撑开——你看到的是被顶开的盒子，不是被截断的文本
移动端按钮文字撑开容器的典型场景
按钮常设display: flex或inline-flex，内部图标+文字组合后，white-space: nowrap一加，整个按钮宽度就被长文本锁死。
- 不要给
button设display: flex，改用display: inline-flex保持内联特性 -
white-space: nowrap必须写在button上，而不是其子i或span上 - 若按钮内还有嵌套Flex（如图标+文字分两列），需逐层检查每个flex子项是否都加了
min-width: 0 - 用
max-width: 100%比width: 100%更安全，尤其在嵌套Flex中能避免父级宽度计算失效
想换行而不是截断？别硬扛nowrap
如果目标是让长文本自动折行，而不是单行省略，white-space: nowrap本身就是第一道拦路虎。
- 先确认computed样式中
white-space是不是normal或pre-wrap；如果是nowrap、pre或pre-line，就得改 -
overflow-wrap: break-word只在“整词放不下当前可用宽度”时触发，必须配合max-width或width才有效 - Flex子项要换行，除了
white-space: normal，还得加min-width: 0，否则min-width: auto照样阻止收缩 - 避免混用
word-break: break-all——它会无差别断词，破坏语义，也不触发text-overflow
真正卡住的点永远是min-width: 0有没有加在**直接承载文本的那个元素**上，而不是父容器或中间层。很多人调半天发现生效了，回头一看是误打误撞改对了这一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
