white-space: nowrap 在 flex 子项上折行，是因为 flex-shrink: 1 压缩导致内容视觉断开；需同时设 white-space: nowrap、flex-shrink: 0 和 min-inline-size: fit-content。
white-space: nowrap 在 flex 子项上加了却还折行？
不是属性没生效，是它只管文本换行逻辑，不管 flex 的盒模型压缩行为。只要子项被 flex-shrink: 1（默认值）压窄，内容就会视觉“断开”——浏览器在空格或标点处强行折行，看起来像 nowrap 失效。
必须同时满足三个条件：
-
white-space: nowrap写在子元素上（如按钮、span、div 文字容器） -
flex-shrink: 0关闭 Flex 的自动收缩，给文字留出物理空间 - 显式限制宽度或最小尺寸：
min-inline-size: fit-content或min-width: 120px；用min-inline-size比min-width更可靠，尤其配合box-sizing: border-box
父容器设了 white-space: nowrap 却不滚动？
这是典型误用。white-space: nowrap 对 flex 容器本身无效——它不控制子项排列，只影响内部文本渲染。要实现横向滚动，关键在布局层：
- 父容器必须设
display: flex+flex-wrap: nowrap（不是 white-space） - 必须有明确宽度约束：
width: 100%或max-width: 480px，否则容器无限撑宽，不触发 overflow - 必须加
overflow-x: auto；仅写overflow: auto在部分浏览器中可能被忽略 - 子项加
flex-shrink: 0，而不是flex: 0 0 auto（后者会重置flex-basis，易引发兼容问题）
想让超长文字显示省略号（…），但 flex 下死活不出？
三个条件缺一不可，且顺序和作用对象不能错：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap：加在文字所在元素上（如.item-title） -
overflow: hidden：加在它的**直接父容器**上（如.item-content-wrap），且该父容器需是 BFC 触发者（min-width: 0或overflow: hidden都可） -
text-overflow: ellipsis：只能对 inline / inline-block 元素生效，所以如果父容器是 flex，得确保它没被意外设成 block 或没设display: inline-flex - 显式宽度限制：不能只靠
flex: 1，要配合width: 100%或max-width: 200px；若用flex: 1，必须同步加min-width: 0
移动端按钮含图标时 nowrap 失效？
常见原因是图标子元素破坏了按钮的内联特性。原生 <button> 是 inline-block，但一旦内部 <i> 或 <span> 被设为 display: block 或 flex，整个按钮的盒模型就退化为块级，white-space: nowrap 仍生效，但无法阻止子元素撑高或换行。
- 按钮自身设
display: inline-flex（保持内联流，又支持 flex 排列） -
white-space: nowrap必须写在<button>上，不要写在图标或文字 span 上 - 图标用
flex-shrink: 0防止被压缩，文字容器用flex: 1+min-width: 0确保可收缩 - 避免给按钮设
width: 100%—— 它会覆盖 inline-flex 的自然宽度，导致布局僵硬
