按钮文字不换行需在文字元素上设min-width: 0、overflow-wrap: break-word，并清除flex-shrink: 0；图文错位应嵌套flex容器隔离；须检查white-space是否为nowrap、父容器是否有宽度约束。
flex容器里按钮文字死活不换行？先查min-width: 0有没有加对地方
Flex子项默认min-width: auto，它会把整段文字（哪怕是一串无空格的base64）当成不可压缩的整体。你写了overflow-wrap: break-word也没用——浏览器压根不给它换行的机会，直接撑宽容器。
必须在**按钮内部的文字元素上**显式加min-width: 0，不是按钮本身，也不是外层容器。常见错误是只给.btn设了display: flex，却忘了给里面的<span class="btn-text"></span>加这行：
.btn-text {
min-width: 0;
overflow-wrap: break-word;
word-break: break-all;
}
- 如果该文字元素还带
flex-shrink: 0，必须删掉，它和min-width: 0冲突 - 用DevTools检查computed样式，确认
min-width确实是0px，不是auto - 旧版Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，建议显式写
图标+文字按钮错位？别让图文共用一个flex容器
文字一换行，图标就“飘”在第一行基线位置，是因为图标和文字都在同一个display: flex容器里，Flex的align-items: center只对第一行生效。
正确做法是嵌套一层flex容器隔离图文：
<button class="btn">
<div class="btn-inner">
<svg class="btn-icon"></svg><span class="btn-text">很长很长的按钮文字</span>
</div>
</button>
-
.btn-icon加flex-shrink: 0+ 显式height（如1.2em），防止被压缩 -
.btn-text用flex: 1+min-width: 0+overflow-wrap: break-word -
.btn-inner设display: flex+align-items: center，别依赖padding或margin-top调图标位置
移动端或Safari里还是不换行？检查white-space是否被继承
很多UI框架或全局样式会给button或a设white-space: nowrap，它会直接锁死所有换行行为，比overflow-wrap优先级还高。
在响应式场景下尤其容易漏：桌面端用了nowrap保持紧凑，但没在小屏媒体查询里重置：
@media (max-width: 768px) {
.btn-text {
white-space: normal;
}
}
- 用DevTools看computed样式里的
white-space值，确认不是nowrap - Safari iOS 15–16对
flex: 1内换行有偏差，可改用width: 0; min-width: 0触发shrink-to-fit - 中文为主时，
word-break: break-word比break-all更友好（注意不是废弃的word-break: break-word）
父容器没宽度约束？max-width是换行的前提
overflow-wrap: break-word只在“内容超出可用空间”时才生效。如果父容器没设width或max-width，浏览器认为空间无限，自然不换行。
按钮本身是inline-flex或flex时，要确保它的父容器有明确宽度限制：
- 给按钮加
max-width: 100%或具体值（如max-width: 200px） - 若按钮在卡片里，别只给卡片设
width，还要检查按钮是否flex: 1或width: 100% - 表格中使用必须配
table-layout: fixed+ 列宽，否则所有换行规则都无效
真正难的不是记住min-width: 0，而是每次布局溢出时，都要顺藤摸瓜查四件事：父容器有没有宽度、子元素是不是flex直接子、min-width是否真为0、white-space有没有被锁死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
