Bootstrap按钮文字不换行的真实原因是.btn类默认设white-space: nowrap；要换行需显式设white-space: normal、word-break: break-word及overflow-wrap: anywhere，且须处理图标、min-width和父容器干扰。
Bootstrap按钮文字不换行，不是因为默认加了text-nowrap，而是.btn类在多数 Bootstrap 5.x 版本中**默认设置了white-space: nowrap**——这是它“不换行”的真实原因。想让它换行，必须显式覆盖；想让它不换行但截断显示省略号，光加text-nowrap远远不够。
为什么加了text-nowrap按钮文字还是换行？
这不是类没生效，而是你加错了地方或漏了前提：
-
text-nowrap只控制white-space，不控制溢出行为；没配overflow: hidden和text-overflow: ellipsis，文字照样会撑宽按钮甚至溢出容器 - 按钮在
.btn-group或.input-group里时，父容器可能自带flex-wrap: wrap或min-width: auto，浏览器优先压缩其他元素，让按钮“看起来没换行”，实为布局假象 - 开发者工具里查
Computed面板，发现white-space值仍是normal？说明你写的text-nowrap被更高优先级样式（比如自定义 CSS、内联 style 或 SCSS 变量）覆盖了 - 按钮含图标（如
<i class="bi bi-download"></i>），而图标元素本身设了white-space: nowrap，会把整行文本锁死
让按钮文字真正不换行并显示省略号的最小配置
单靠一个类或一行样式大概率失败。必须组合写，且顺序和取值都关键：
<button class="btn btn-primary" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; display: inline-block;"> 这是一个超长的按钮文字,应该被截断显示 </button>
-
max-width是硬性前提：没有它，text-overflow: ellipsis完全不生效 -
display: inline-block确保按钮响应max-width（<button>默认就是，但显式声明可防意外） - 别用
width: 100%替代max-width：在 flex 容器里它会被拉满，失去截断意义 - 如果按钮在
.btn-group里，记得给.btn-group加flex-wrap: nowrap，否则小屏下 group 自身可能换行，把按钮挤到第二行
让按钮文字正常换行（而不是撑开或溢出）
目标不是“去掉 nowrap”，而是显式声明可换行行为，并处理无空格长串：
- 直接加内联样式：
style="white-space: normal; word-break: break-word; overflow-wrap: anywhere;" - 避免依赖
text-wrap类：它只对内联元素生效，按钮是inline-block，该类基本无效 - 含 URL 或 UUID 等无空格字符串时，
white-space: normal还不够，必须加word-break: break-word或更稳妥的overflow-wrap: anywhere - 按钮有图标时，检查图标元素是否继承了
white-space: nowrap；可临时加style="white-space: normal;"到图标上解除锁定 - 别忽略
min-width：某些主题给.btn-sm设了min-width: 64px，宽度下限卡死了换行触发条件
容易被忽略的兼容性细节
真正起作用的永远是那几行 CSS 或那几个 HTML 符号，而不是一个并不存在的类名。比如：
-
ButtonTextWrap不是 Bootstrap 官方类，搜到就绕开 -
table-responsive容器会强制设white-space: nowrap，影响内部所有子元素；需针对性加style="white-space: normal;"覆盖 - 中文能自然断字，但连续英文/数字串（如
123e4567-e89b-12d3）需要word-break或overflow-wrap配合才折行 - Flex 容器里的按钮，即使写了
white-space: nowrap仍可能换行——因为flex-shrink: 1默认允许压缩，浏览器宁可换行也不缩小内容
