white-space: nowrap 在 Flex 按钮中失效的根本原因是 flex-shrink: 1 优先级高于换行控制，必须配合 flex-shrink: 0 和 min-inline-size 才能真正锁死单行。
white-space: nowrap 本身不能单独防止 Flex 按钮内文字换行——它只是“锁住”换行意愿，但若按钮被 Flex 压缩到小于内容所需宽度，浏览器仍会强制断行或溢出。
为什么 white-space: nowrap 在 Flex 按钮里经常失效
Flex 容器默认允许子项收缩（flex-shrink: 1），按钮作为子项，即使写了 white-space: nowrap，也会被压缩到触发内部换行的临界点。这不是 CSS 失效，而是 Flex 的收缩逻辑优先级更高。
- 按钮内文字未换行？先检查是否被
min-width或flex-basis卡住了最小尺寸 - 按钮内文字换行了？大概率是
flex-shrink: 1在起作用，而不是white-space没写对 - 写了
white-space: nowrap还溢出容器？说明按钮没设flex-shrink: 0，也没限制自身最大宽度
必须配合 flex-shrink: 0 才能真正锁死单行
要让 white-space: nowrap 生效，得先切断 Flex 的收缩路径。否则浏览器会在“保持单行”和“不溢出容器”之间选后者——而它选的是后者。
- 给按钮加
flex-shrink: 0：这是硬性要求，不是可选项 - 同时显式写
white-space: nowrap：明确告诉文本“别断” - 如果按钮在
flex-wrap: wrap容器里，还要确认父容器没用min-width把按钮挤窄 - 避免对按钮同时设
width和flex: 1，行为不可预测
响应式下按钮文字突然换行？查 min-inline-size + box-sizing
小屏换行往往不是文字问题，而是按钮实际可用宽度被 padding/border 吃掉了。用 min-inline-size 替代 min-width 更准，再配 box-sizing: border-box。
-
min-width: 100px控制 content box，但按钮常带padding: 8px→ 实际占宽至少 116px - 改用
min-inline-size: 100px+box-sizing: border-box，宽度计算包含 padding 和 border - 调试时看开发者工具的 “Computed” 面板，比猜更可靠
- 媒体查询中降级
gap值（比如从1rem改成0.5rem），避免它吃掉最后一丝空间
button 元素自带 inline-level 行为，display: flex 会干扰 white-space
给 直接设 display: flex，它内部文本就变成 flex item，white-space 对它的约束力会下降——尤其当按钮内还有图标或 span 时。
- 如需按钮内多元素对齐，用
display: inline-flex替代display: flex - 确保
white-space: nowrap加在按钮本身，而不是其子元素上 - 图标类（如
.icon）若设了flex-shrink: 0，要同步检查是否意外拉宽了按钮整体 - 慎用
font-size过大的值（如18px以上），单字过宽容易在窄按钮里触发换行
真正卡住按钮文字不换行的，从来不是 white-space 写没写对，而是 flex-shrink 和 min-inline-size 这两个值有没有被正确覆盖。漏掉任意一个，nowrap 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
