white-space: nowrap本身不撑盒子，仅禁止文本换行；真正导致横向扩展的是内容单行渲染、父容器缺宽度约束及flex默认min-width: auto共同作用的结果。
white-space: nowrap 本身不撑盒子，它只是关掉了换行开关；真正让盒子横向突破限制的，是内容被迫单行渲染 + 父容器没设宽度围栏 + flex 默认保护机制共同作用的结果。
white-space: nowrap 只管文本，不管盒模型
它只告诉浏览器：“这一段文字不准折行”，但不会帮你限定宽度、不会自动裁剪、也不会改变 display 或 min-width。如果父容器是 display: block 且没设 width 或 max-width，那内容多宽，盒子就撑多宽——这是盒模型的自然行为，不是 nowrap 的“bug”。
常见误判场景：
- 给一个
div加了white-space: nowrap，但它仍是块级元素，默认占满父容器宽度，视觉上“断行”其实是内容溢出后被父容器裁剪（或滚动），而非 nowrap 失效 - 在
table-cell或inline-block元素里加 nowrap，若内部有空格、换行符或长单词，会直接拉宽整个单元格 - 用
word-break: break-all或overflow-wrap: break-word同时存在时，它们会主动打断单词，覆盖 nowrap 效果，造成“看似无效”
Flex 布局下 nowrap 撑开盒子的真正原因
在 display: flex 容器中，子项默认 min-width: auto，W3C 明确规定：「flex items won’t shrink below their minimum content size」——也就是最长单词或不可折行内容的原始宽度。一旦你加了 white-space: nowrap，这个“最小内容宽度”就被拉高了，而 flex 不愿压缩，于是盒子就撑开了。
解决方法不是删掉 nowrap，而是打破这个默认保护：
- 给子元素显式设置
min-width: 0（最直接有效） - 或配合
flex-shrink: 0（如果你确定不需要收缩） - 或用
overflow: hidden+text-overflow: ellipsis+max-width构成完整截断链
注意：min-width: 0 必须加在 flex 子项上，不是父容器；加在父容器上无效。
为什么 text-overflow: ellipsis 总是不生效
三件套缺一不可：white-space: nowrap + overflow: hidden + text-overflow: ellipsis。但更常被忽略的是隐含前提：
- 元素必须是块级或 inline-block（
display: inline不支持text-overflow） - 必须有明确宽度约束（
width或max-width），否则浏览器认为“还有空间”，根本不触发省略逻辑 - 父容器不能是
display: inline，否则无法形成 BFC，宽度计算失效 - 如果用了
box-sizing: content-box（默认），记得把padding和border算进max-width，否则实际宽度超限
容易被跳过的布局上下文干扰
很多“nowrap 撑开盒子”的问题，根源不在 nowrap 本身，而在它暴露了其他布局配置的松动：
-
display: inline-block元素间的 HTML 空格会被渲染为 4px 左右空白，叠加上 nowrap 文本，容易悄悄突破容器宽度 - 父容器用了
fit-content或width: max-content，本质就是“按内容定宽”，nowrap 只是让它更明显 - 子元素用了
width: fit-content或display: inline，又套了 nowrap，结果宽度由最长单词决定，而非你预期的容器边界 - flex 容器没设
flex-wrap: nowrap，虽然子项 nowrap，但容器自己先 wrap 了，导致布局错乱
真正要盯住的，从来不是 white-space 这一行样式，而是它所处的整个盒模型上下文——尤其是宽度来源、min-width 行为、以及是否形成了可靠的 BFC。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
