按钮文字不换行主因是 white-space: nowrap 被外部强制设置，需显式重置为 normal 并配合 overflow-wrap: anywhere 和 min-width: 0 才能正常折行。
按钮文字不换行，真不是 .btn 自己干的
Bootstrap 的 .btn 类默认 white-space: normal，它本身不会锁死换行。你看到文字硬撑着不折、溢出或被截断，90% 是外部干扰：父容器加了 text-nowrap，按钮上误贴了 style="white-space: nowrap"，或者它嵌在 .input-group / .d-flex 里被继承了 nowrap。检查开发者工具的 computed styles，重点盯 white-space 这一项——它一旦是 nowrap，后面所有 word-break 或 overflow-wrap 都直接失效。
white-space: normal 是换行的前提，不是可选项
想让按钮内长文本（比如 URL、UUID、中英文混排）正常折行，第一步必须显式重置 white-space。光靠 text-wrap 类不行——它是为内联文本设计的，对 display: inline-block 的按钮基本无效。稳妥做法是：
- 内联写：
style="white-space: normal;" - 或加自定义类：
.btn-wrap { white-space: normal !important; }（!important是为压过父级text-nowrap） - 若按钮含图标（如
<i class="bi bi-download"></i>），确保图标容器也没设white-space: nowrap，否则整行被“钉死”
纯字母数字串（如 URL）仍不折？得配 overflow-wrap: anywhere
white-space: normal 只管空格/连字符处是否折行，对 https://example.com/verylongpath 这种无分隔符长串没用。这时需组合断行策略：
-
overflow-wrap: anywhere（推荐）：比break-word更智能，现代浏览器支持良好 -
word-break: break-word：兼容性更好，但对中文断字不敏感 - 慎用
word-break: break-all：会把“internationalization”切成 “inter-nation-aliza-tion”，影响可读性 - 示例：
<button class="btn btn-sm" style="white-space: normal; overflow-wrap: anywhere;">https://api.example.com/tokens/123e4567-e89b-12d3</button>
Flex 容器里的按钮死活不换行？查 min-width: auto
把按钮放进 d-flex 或 flex-row 容器后，即使写了 white-space: normal 和 overflow-wrap，它仍可能拒绝折行。原因是 Flex Item 默认 min-width: auto，浏览器宁可让内容溢出，也不压缩宽度来触发换行。解决方法很简单：
- 给按钮加
style="min-width: 0;"（注意不是min-width: 0px） - 或用 Bootstrap 工具类：
flex-shrink-0配合overflow-x: auto做滚动兜底 - 别依赖
text-break类单独生效——它只设word-break: break-word，不碰white-space和min-width
最常被忽略的是：white-space 必须先于所有断行规则生效；而 Flex 场景下，min-width: auto 是个隐形开关，不手动关掉，其他样式全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
