bootstrap 中 text-wrap 不是有效类名，应使用 white-space、word-break、 或零宽空格控制按钮文字换行，并确保容器宽度受限和断点标记存在。
按钮文字换行为什么加text-wrap没用
因为text-wrap根本不是 Bootstrap 的有效工具类——它在 Bootstrap 5 中不存在，也不对应任何标准 CSS 属性。你加了没反应，不是 CDN 没加载，而是浏览器直接忽略这个类名。真正起作用的是white-space、word-break或 HTML 级别的换行提示符。
让按钮内文字在指定位置断开：用<wbr></wbr>或零宽空格
当“立即免费试用”需要断成两行（比如“立即”+“免费试用”），CSS 控制太粗放，容易在错误位置折行。此时应直接干预 HTML：
- 在希望允许断行的位置插入
<wbr></wbr>：例如<button class="btn btn-primary">立即<wbr>免费<wbr>试用</wbr></wbr></button> - 或用 Unicode 零宽空格
（兼容性略好，IE9+ 支持） - 避免用普通空格或
<br>：前者可能被white-space: nowrap吞掉，后者会破坏按钮的内联流式结构
按钮用了.btn-block或.w-100后换行不生效？检查宽度约束
如果按钮已占满父容器（如加了.w-100），那它本身没有“可折行的宽度余量”，再怎么设word-break也看不到效果。必须配合显式宽度限制：
- 给按钮加
style="max-width: 200px;"或自定义类（如.btn-narrow） - 确保父容器没有
white-space: nowrap继承下来（常见于.input-group或某些卡片标题区域） - 别依赖
.text-break：它专为表格单元格设计，在按钮上无意义；按钮默认是display: inline-block，white-space: normal已启用，只需控制宽度+断点即可
响应式场景下小屏按钮仍不换行？别指望text-wrap有响应变体
Bootstrap 所有文本换行相关工具类（包括text-break、text-nowrap）都没有text-sm-break这类响应式前缀。所谓“小屏自动换行”，本质是容器变窄后，内容触达了<wbr></wbr>或overflow-wrap: break-word的触发阈值——前提是这些机制已在 HTML 或 CSS 中提前写死。最稳的做法是：
- 在关键按钮文案中嵌入
<wbr></wbr>（如“下载安装包”） - 对所有按钮统一加
style="overflow-wrap: break-word; max-width: 100%;"（注意：仅对inline-block有效） - 避开全局覆盖
button { white-space: normal; }，它可能破坏 badge、图标按钮等紧凑组件的布局
最容易被忽略的一点：按钮换行是否生效，最终取决于「容器宽度」和「断点标记是否存在」两个硬条件，而不是某个看起来很像的类名。别在 DevTools 里反复刷新检查text-wrap有没有生效——它压根不会出现在 computed 样式里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
