按钮文字被压扁或换行异常，根本原因是flex-shrink: 1默认启用，必须设flex-shrink: 0切断收缩，并配合white-space: nowrap、min-width: fit-content及检查父级flex-wrap和overflow。
按钮文字被压扁或换行异常，先关掉 flex-shrink
Flex 容器中按钮文字被压缩、挤成一坨，根本不是文字本身的问题，而是 flex-shrink: 1 在起作用。按钮默认会参与收缩，哪怕只含两个字，也会被强行窄化，导致内部文字被迫换行或字间距崩坏。解决第一步就是切断这个行为：flex-shrink: 0。它不改变按钮尺寸，只是告诉浏览器：“别动我”。
- 不要只加
white-space: nowrap——它防内部换行，但挡不住按钮整体被缩窄 - 避免对按钮写
flex: 1或flex: 1 1 auto，这等于主动邀请收缩 - 若按钮是
display: inline-flex或嵌套在span里，需确保其直接父容器是 Flex 容器，否则flex-shrink不生效
用 min-width: fit-content 比写死像素更可靠
min-width: fit-content 是现代方案的核心——它让按钮宽度紧贴文字+内边距+图标自然撑开，不依赖字体加载时机、缩放比例或中英文混排宽度差异。比 min-width: 120px 这类固定值健壮得多。
- Chrome 68+、Firefox 61+、Safari 14.1+ 原生支持；旧版 Safari（iOS 13.4 以下）需加
-webkit-fit-content前缀 - 若按钮含
svg图标，确保图标没设width或flex-shrink: 1，否则图标被压扁会牵连文字显示 - 禁用
flex: 1和min-width: fit-content共存——语义冲突：一个要填满，一个拒绝缩小，布局引擎可能计算异常
white-space: nowrap 不生效？往上查父级 flex-wrap 和 overflow
即使按钮自己写了 white-space: nowrap，仍出现文字“被压扁”或整块按钮换到下一行，大概率是父级容器在捣鬼：
- 父容器设了
flex-wrap: wrap，空间不足时直接把按钮整体折行，你看到的“压缩”其实是换行错觉 - 父容器或祖先元素有
overflow: hidden+text-overflow: ellipsis，而按钮没配overflow: hidden，导致溢出内容被裁切，误判为压缩 - 检查 computed 样式：在开发者工具里选中按钮，确认
white-space确实是nowrap，再逐级往上查父级的flex-basis、width和flex-wrap
响应式场景下，min-width 要分级控制
小屏时一个 min-width: fit-content 可能撑破容器，引发横向滚动。不能只靠一个值打天下，得按断点动态调整：
- 小屏（≤480px）：
min-width: 140px（保最低可点击区域 + “提交”类短文案） - 中屏（481–768px）：
min-width: 180px（兼容中等长度文案，如“保存并继续”） - 大屏及以上：去掉
min-width，交由flex-basis或网格布局管理 - 慎用
min-width: 20%这类百分比——Flex 下父容器宽度可能动态变化，导致最小宽度不可控
flex-shrink: 0，有的没设），会导致兄弟项之间争夺空间不均，视觉上反而更“不整齐”。统一处理才是稳定前提。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
