bootstrap按钮文字不换行需同时设置white-space: normal、overflow-wrap: anywhere和min-width: 0，因父容器text-nowrap继承、图标容器强制nowrap、flex item默认min-width: auto及纯字母数字串无分隔符导致单一样式无效。
Bootstrap按钮文字不换行，不是因为没设 white-space: nowrap，而是它已经被设了——而且大概率是被父级或组件间接强加的。
为什么加了 white-space: normal 还不换行
常见现象：手动给按钮加 style="white-space: normal;"，但长文本（如 URL、UUID）依然溢出或撑宽。原因有三：
- 父容器（比如
.input-group、.d-flex或自定义div）带text-nowrap类，该样式会继承，直接覆盖按钮自身的white-space - 按钮内部含图标（如
<i class="bi bi-download"></i>），而图标容器被设了white-space: nowrap，整行被“钉死” - Flex Item 默认
min-width: auto，浏览器宁可让内容溢出，也不压缩宽度触发换行——此时光改white-space没用
纯字母数字串（如 URL）必须配 overflow-wrap: anywhere
white-space: normal 只管空格、连字符处是否折行，对 https://example.com/verylongpath 这类无分隔符字符串完全无效。必须组合断行策略：
- 显式写
white-space: normal（前提，不可省） - 加
overflow-wrap: anywhere（比break-word更现代、更智能，推荐） - 避免用
word-break: break-all——中文会被拆字，UI 显得破碎 - 若按钮在 Flex 容器中，额外加
min-width: 0才能释放压缩空间
示例：<button class="btn btn-sm" style="white-space: normal; overflow-wrap: anywhere; min-width: 0;">https://example.com/123e4567-e89b-12d3</button>
别信 text-wrap 类能搞定按钮换行
text-wrap 在 Bootstrap 中等价于 white-space: normal，但它只对内联元素（如 <span></span>）生效；按钮默认是 display: inline-block，text-wrap 对它基本无效。
- 加
class="text-wrap"到按钮上，开发者工具里看 computed styles，white-space很可能还是nowrap - 真正起效的是直接写
style="white-space: normal;"或自定义类加!important压过父级 - 如果按钮嵌在
.table-responsive或.card里，先检查这些容器是否自带white-space: nowrap
最易被忽略的一点：换行不是单一样式的事——white-space 是开关，overflow-wrap 是断点策略，min-width 是弹性前提。三者缺一，都可能让长文本继续硬撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
