white-space: nowrap 本身不扩展盒模型，只禁止文本换行；元素横向撑开是因禁用换行后内容被迫单行显示，而父容器缺乏宽度约束或溢出处理，导致内容区物理宽度拉长，尤其在 flex 布局或未设 max-width 的场景下更明显。
white-space: nowrap 本身不扩展盒模型，它只禁止文本换行；真正让元素横向撑开的，是内容在禁用换行后“硬着头皮往外顶”，而父容器又没做宽度约束或溢出处理。
为什么 nowrap 看起来“让盒子变宽”
这不是 white-space: nowrap 的本意，而是它触发了盒模型的自然响应：
- 文本原本会按容器宽度自动折行，
nowrap把这个折行能力关掉了 - 浏览器只能把整段文本塞进一行，于是内容区（content）物理宽度被迫拉长
- 如果父容器是
box-sizing: content-box（默认），且没设max-width或width，子元素就直接撑破边界 - 尤其当父容器是
display: flex时，flex item 默认min-width: auto，会优先保持内容完整，进一步加剧横向扩张
常见被忽略的布局上下文干扰
很多情况下，你以为加了 nowrap 就完事了，其实是别的布局规则在暗中放行：
-
display: inline-block子元素之间有 HTML 空格，累积宽度超限，再叠加上nowrap文本，双重撑宽 - 父容器用了
flex但没设flex-shrink: 0或min-width: 0，导致 flex item 不愿压缩 - 容器本身没有明确宽度（比如只靠
fit-content或未设width/max-width），nowrap下内容宽度成了唯一尺寸依据 - 子元素用了
width: fit-content或inline显示，又套了nowrap，结果宽度由最长单词/字符串决定
怎么真正控制住横向扩张
关键不是删掉 nowrap，而是给它配一套“围栏”：
- 必须配合
width或max-width（否则text-overflow: ellipsis不生效） - 容器
display不能是inline，得是block、inline-block或flex（且设min-width: 0） - 需要省略时，三件套缺一不可：
white-space: nowrap+overflow-x: hidden+text-overflow: ellipsis - 若父容器是 flex，建议显式写
flex-shrink: 0或min-width: 0，防止 flex 算法“护短”
最常被跳过的一步：忘了 box-sizing: border-box。当 padding 和 border 叠加在内容宽度上，哪怕你设了 max-width: 200px，实际渲染可能到 230px——这时候 nowrap 只是压垮骆驼的最后一根稻草。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
