按钮文字不换行主因非.btn默认样式，而是父容器（如.text-nowrap、.input-group）或内联元素强制white-space: nowrap；解决需显式设white-space: normal、word-break: break-word及overflow-wrap: anywhere，并重置min-width和检查包裹组件。
.btn 默认不会强制不换行，但 Bootstrap 的按钮类（如 .btn-primary）在某些版本或组合下可能继承 white-space: nowrap，尤其当按钮被嵌套在紧凑容器、配合 .text-nowrap 或使用了自定义 SCSS 变量时。你看到按钮内文字“不换行”，大概率不是按钮本身的行为，而是外部样式或父级干扰导致的。
为什么按钮里文字突然不换行了？
常见原因不是 .btn 自带 white-space: nowrap，而是以下任一情况：
- 父容器（比如
.input-group、.d-flex或自定义div）加了text-nowrap类，它会继承影响子元素 - 按钮上误加了
text-nowrap或style="white-space: nowrap" - Bootstrap 5.3+ 中，若按钮是
<button>且内部含<span>或图标，而该内联元素被设为white-space: nowrap，也会压制换行 - SCSS 编译时覆盖了
$btn-white-space变量（默认是normal），部分定制主题会改成nowrap
如何让按钮内文字正常换行？
目标是让长文本在按钮内按需折行，而不是溢出或强制单行。关键不是“去掉 nowrap”，而是显式声明可换行行为：
- 给按钮加
style="white-space: normal;"—— 最直接，适合单点修复 - 用类
text-wrap：但注意它只对内联元素生效；按钮是display: inline-block，所以text-wrap在多数情况下无效，别依赖它 - 更稳妥的是组合设置：
style="white-space: normal; word-break: break-word; overflow-wrap: break-word;" - 如果按钮含图标（如
<i class="bi bi-download"></i>），确保图标容器没设white-space: nowrap，否则整个行被锁死
按钮中长 URL / UUID 怎么折行？
纯字母数字无空格字符串（如 123e4567-e89b-12d3-a456-426614174000）在按钮里默认不折行，即使 white-space: normal 也不够：
-
overflow-wrap: break-word对这类“单词”效果有限，尤其在短宽按钮中 - 必须加
word-break: break-all才能强制在任意字符间断开（慎用，中文会断字） - 更推荐方案：用
word-break: break-word+overflow-wrap: anywhere（现代浏览器支持更好，比break-word更智能） - 示例：
<button class="btn btn-sm" style="white-space: normal; word-break: break-word; overflow-wrap: anywhere;">https://example.com/very-long-path-123e4567-e89b-12d3</button>
别忽略按钮的 min-width 和 padding
即使 CSS 换行规则全写对，按钮仍可能“看起来不换行”，真实原因是：
- Bootstrap 默认给
.btn设了min-width: 64px（或类似值），窄按钮内容撑不开，浏览器宁愿溢出也不折行 -
padding过大（如.btn-lg）压缩了可用宽度，进一步抑制折行机会 - 解决办法：显式设
min-width: 0，再配合width: fit-content或max-width: 100%让换行有空间
最易被忽略的一点：按钮是否被包裹在 .input-group 或 .btn-group 里？这些组件常自带 white-space: nowrap 用于对齐控制，会穿透影响内部按钮——得单独给按钮重置，不能只改按钮自身类。
