根本原因是flex-shrink默认为1，导致按钮在空间不足时被压缩；解决需设flex-shrink: 0、white-space: nowrap，并用min-width: fit-content适配内容。
Flex容器里按钮文字被压扁，根本原因是flex-shrink默认为1
Flex项目默认会收缩（flex-shrink: 1），当容器空间不足时，按钮这类内联级元素会优先压缩自身宽度，连带把文字挤成一坨。这不是文字换行问题，而是弹性盒子在“主动瘦身”。常见于导航栏、工具条里多个button并排且容器宽度受限的场景。
解决思路不是硬撑宽度，而是告诉按钮：“别缩我”。实操上分两步：
- 给按钮设
flex-shrink: 0，切断它参与收缩的资格 - 配合
white-space: nowrap防止文字内部换行（尤其含空格或中英文混排时） - 若按钮内有图标+文字，还需确保
min-width足够容纳内容，比如min-width: fit-content或具体像素值
white-space设成nowrap还不够？检查父级是否强制换行
即使按钮自己设了white-space: nowrap，如果它的直接父容器（比如div）设置了flex-wrap: wrap或width过小，按钮仍可能被整体换到下一行——这时你看到的“文字压缩”其实是按钮被挤窄后内部文字溢出隐藏或省略。
验证方法：打开开发者工具，选中按钮，看computed面板里white-space是否生效，再往上查父级的flex-basis、width和flex-wrap。常见误操作：
- 在按钮上设
white-space: nowrap，但忘了关掉text-overflow: ellipsis（它需要overflow: hidden+width限定） - 父容器用了
justify-content: space-between，但子项太多导致可用空间被摊薄，此时单靠white-space无济于事，必须配flex-shrink: 0
用min-width: fit-content比固定像素更健壮
给按钮写死min-width: 120px看似简单，但中英文字符宽度不一、字体加载延迟、缩放比例变化都会让这个值失效。现代方案是用min-width: fit-content，它会让按钮宽度紧贴内容自然撑开，且兼容主流浏览器（Chrome 68+、Firefox 61+、Safari 14.1+）。
注意点：
-
fit-content在旧版Safari需加-webkit-fit-content前缀（仅iOS 13.4以下/ macOS 10.15.3以下） - 若按钮内含
svg图标，确保图标本身没设width或flex-shrink: 1，否则图标会被压扁，牵连文字显示异常 - 避免对按钮同时设
flex: 1和min-width: fit-content——前者要求填满剩余空间，后者拒绝缩小，冲突会导致布局计算异常
移动端小屏下仍出问题？检查font-size响应式断点
Flex收缩和white-space都正常，但文字还是糊成一团，大概率是font-size在小屏被设得太小，视觉上像被压缩。尤其当使用rem或vw单位时，未配合适当媒体查询，12px文字在320px宽屏幕上实际渲染可能只剩9px。
快速定位：
- 在开发者工具中临时禁用所有
@media规则，看文字是否恢复正常 - 检查按钮的
font-size是否被祖先元素的transform: scale()或zoom间接影响（这两个属性会改变渲染尺寸但不触发重排） - 若用
vw，确认公式如font-size: calc(14px + 0.3vw)在最小视口下不低于12px
真正难缠的是那些没显式设font-size、却因继承链过长导致最终计算值过小的情况——这时候得一层层往上查computed font-size，而不是只盯着按钮本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
