Bootstrap按钮默认不换行因white-space:nowrap，需用white-space:normal覆盖；响应式下推荐flex-wrap+max-width组合；精准断点可用或零宽空格；ButtonTextWrap非官方类名。
Bootstrap 按钮默认不换行，white-space 是关键开关
Bootstrap 的 .btn 类默认设置了 white-space: nowrap，这是按钮内文字不换行的根源。哪怕容器宽度很窄、文字很长，浏览器也会强行撑宽按钮或溢出——不是 bug，是设计使然。
要让文字换行，必须显式覆盖这个样式。最直接的方式是在按钮上加自定义类，然后重置 white-space：
.btn-wrap {
white-space: normal;
}
注意不要用 break-spaces 或 pre-wrap，它们对空格和换行符敏感，而按钮文字通常无手动换行符，normal 才能触发浏览器按容器宽度自动折行。
响应式场景下用 flex-wrap 配合 max-width 更可控
纯靠 white-space: normal 有时会把按钮撑得过宽（尤其多字中英文混排），在小屏幕下反而破坏布局。这时推荐组合方案：
- 给按钮父容器加
flex布局，并设flex-wrap: wrap - 按钮自身设
max-width: 100%和white-space: normal - 避免设置固定
width或min-width，否则会抑制换行
这样按钮既能随容器缩放，又能在内容超长时自然折成多行，且保持居中对齐不跑偏。
使用
如果只需要在特定位置换行（比如 “立即免费试用” 希望断在 “免费” 前），CSS 控制太粗粒度。此时可嵌入语义化换行提示符：
- HTML 中插入
立即，浏览器会在该位置“允许”换行，但不强制免费 试用 - 或用 Unicode 零宽空格
：效果类似，兼容性略好于 - 避免用普通空格或
white-space吞掉，后者会破坏按钮内联结构
ButtonTextWrap 不是 Bootstrap 官方类名，别在 HTML 里硬写
搜索时容易误以为 ButtonTextWrap 是 Bootstrap 内置工具类——它根本不存在。Bootstrap 5 没有提供任何类似 .text-wrap 的按钮专用换行类，所有换行控制都得靠自定义 CSS 或 HTML 微调。
另外要注意：如果按钮用了 .btn-block（Bootstrap 4）或 .w-100（Bootstrap 5），它已占满父容器宽度，此时换行效果会被掩盖，需配合 max-width 限制实际宽度才能观察到折行行为。
真正起作用的永远是那几行 CSS 或那几个 HTML 符号，而不是一个并不存在的类名。
