white-space: nowrap在flex子元素中“失效”并非属性无效，而是flex默认flex-shrink: 1压缩子项宽度，导致内容视觉折行或溢出；必须配合flex-shrink: 0、明确宽度及overflow: hidden等条件才能真正生效。
white-space: nowrap 在 Flex 子元素里为什么经常“失效”
不是 white-space: nowrap 没起作用，而是它只管文本渲染层的换行意愿，而 Flex 布局在盒模型层就先压缩了子元素宽度。只要子项被 flex-shrink: 1（默认值）压窄到小于内容所需最小宽度，浏览器就会在视觉上“折行”或溢出——这不是换行，是布局挤压导致的渲染错觉。
常见错误现象：white-space: nowrap 加了，按钮文字还是断成两行；开发者工具里看到 computed white-space 确实是 nowrap，但文字仍不连贯。
- 检查该子元素的
flex-shrink是否为1（默认），必须显式设为0 - 确认父容器是否为
display: flex且未设flex-wrap: nowrap——后者控制的是子项排列，和内部文字无关 - 避免同时设置
width: 100%和flex: 1，二者冲突会导致宽度计算不可预测
Flex 子元素加 nowrap 的正确写法
要让 white-space: nowrap 真正生效，得切断 Flex 的收缩路径，并明确约束文本行为。三者必须同时存在：
-
white-space: nowrap：告诉文本“别在空格/换行符处断开” -
flex-shrink: 0：阻止 Flex 容器压缩该子项，给文本留出物理空间 -
min-inline-size: fit-content或具体值（如min-inline-size: 120px）：确保子项有最低可用宽度，尤其在小屏下避免被 padding/border 吃掉空间
示例（按钮在 flex 容器中）：
.btn {
white-space: nowrap;
flex-shrink: 0;
min-inline-size: 100px;
box-sizing: border-box;
}
注意：min-width 对 flex item 不够精准，min-inline-size 更可靠，且配合 box-sizing: border-box 可包含 padding 和 border。
按钮内含图标时的 nowrap 失效原因
原生 <button></button> 默认是 inline-block，但一旦内部嵌套 <i></i>、<span></span> 等元素，且这些子元素被设了 display: block 或 flex，整个按钮的盒模型就被破坏了——white-space: nowrap 只作用于按钮自身，对子元素无效。
- 不要给按钮设
display: flex，改用display: inline-flex（保持内联特性） - 确保
white-space: nowrap写在按钮上，而不是图标或 span 上 - 若图标容器本身设了
white-space: nowrap，会连带锁死整行，需单独重置其子元素 - Bootstrap 用户特别注意：
.text-nowrap类可能从父容器继承，用开发者工具查 computed styles 确认来源
想单行省略（…）？nowrap 只是起点
white-space: nowrap 单独存在时，文字只是不折行，但会溢出或撑宽容器。要显示省略号，必须凑齐三件套：
white-space: nowrap-
overflow: hidden（不能是visible或auto） text-overflow: ellipsis
而且这三者只对**有明确宽度限制**的元素生效：要么设 width/max-width，要么靠父容器（如 flex 容器的剩余空间）提供硬性边界。在 Flex 中，若父容器没设 flex-basis 或 width，子项可能得不到稳定宽度，导致 ellipsis 不触发。
最易被忽略的一点：Flex 子项的换行表现，最终取决于它自己的 flex-shrink、min-inline-size 和文本属性三者的合力，而不是某一个 CSS 规则的“开关”作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
