按钮文字被折行的根本原因是flex子项默认min-width: auto阻止收缩，必须在按钮内部文字元素（如.btn-text）上显式设min-width: 0，并配合overflow-wrap: break-word、word-break: break-all，同时删除flex-shrink: 0，确保父容器有flex-wrap: wrap和width/max-width约束。
按钮文字被折行，大概率是 min-width: auto 在作祟
Flex 子项默认有 min-width: auto（Chrome 下约 120px），它会把一整段文字（哪怕是一串无空格的 base64）当成不可压缩的“原子”，哪怕你写了 overflow-wrap: break-word，浏览器也压根不给换行机会，直接撑宽按钮或溢出容器。
关键不是加 white-space: nowrap，而是要解除这个隐式锁死。必须在**按钮内部的文字容器上**显式设 min-width: 0，不是按钮本身，也不是外层父容器。
-
.btn-text或span这类包裹文字的元素上加min-width: 0 - 同时配
overflow-wrap: break-word和word-break: break-all（后者对长 URL/无空格字符串更有效） - 如果该文字元素还带
flex-shrink: 0，必须删掉——它和min-width: 0冲突 - 用 DevTools 检查 computed 样式，确认
min-width真的是0px，不是auto
父容器 flex-wrap: wrap 漏了，按钮根本不会考虑换行
Flex 默认是 nowrap，浏览器宁可让按钮横向溢出，也不会主动折行。这个属性必须写在**按钮的直接父容器**上，且需配合 display: flex 才生效。
- 检查父容器是否真有
display: flex和flex-wrap: wrap - 父容器没设
width或max-width，会导致“永远够宽”，换行条件永不触发 - 子项用了
flex: 1或flex-shrink: 0，内容宁可撑爆也不缩小，间接锁死换行逻辑 - 按钮内含长单词或未设
word-break: break-word，单行宽度被撑满，也会阻止换行发生
white-space: nowrap 被继承或覆盖，文字照样断行
white-space: nowrap 只控制文本内容是否换行，不改变盒模型。很多 UI 框架或全局样式会给 button 或 a 设 white-space: nowrap，但问题常出在：它被祖先元素继承后又在小屏媒体查询里漏重置。
- 用 DevTools 查 computed 样式里的
white-space值，确认不是nowrap（如果是，那它本就不该换行；如果不是，说明是别的原因） - 常见漏点：
@media (max-width: 768px)里没把按钮文字的white-space改回normal - 某些重置 CSS 把原生
button改成display: block，此时white-space: nowrap失效，需手动加display: inline-block - 避免和
word-break: break-all同时使用，它们会主动打断单词，覆盖nowrap效果
图标+文字错位，本质是图文共用一个 flex 容器
文字一换行，图标就“飘”在第一行基线位置，是因为图标和文字都在同一个 display: flex 容器里。align-items: center 只对第一行生效，第二行图标失去锚点。
- 正确做法是嵌套一层容器隔离图文：
<div class="btn-inner"> <svg></svg><span class="btn-text">很长文字</span> </div> -
.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调图标位置
真正难的不是让文字换不换行，而是搞清哪一层在起作用：是文本渲染规则、Flex 主轴分配逻辑，还是盒模型本身的收缩限制。min-width: 0 这一行，常常就是开关所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
