Bootstrap按钮文字默认会换行（.btn类white-space: normal），所谓“不换行”多因外部样式干扰；要实现不换行并显示省略号，必须同时满足white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确max-width。
bootstrap按钮文字默认是会换行的（.btn 类默认 white-space: normal），你看到“不换行”，基本是外部样式或误配导致的——想让它**真正不换行并截断显示省略号**，必须三者齐备：white-space: nowrap + overflow: hidden + text-overflow: ellipsis，且按钮要有明确宽度上限。
为什么加了 text-nowrap 还是换行？
常见原因不是类没生效，而是它被覆盖或缺少配套规则：
-
text-nowrap只设white-space: nowrap，但没控制溢出，按钮会强行撑宽甚至突破容器边界 - 父容器用了
.d-flex或.input-group，内部 flex item 默认min-width: auto，浏览器优先压缩其他元素而非让按钮折行，表面看像“不换行”，实则是布局挤压下的假象 - 按钮本身有
min-width（比如.btn-sm在某些主题里设了min-width: 64px），宽度下限卡死了换行触发条件 - 开发者工具里查 computed styles，发现
white-space实际值仍是normal——说明text-nowrap被更高优先级样式（如 inline style 或自定义 CSS）覆盖了
让按钮文字不换行并显示省略号的最小可行配置
只靠一个类或一行样式大概率失败。必须组合写：
<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 自身可能换行，把按钮挤到第二行
含图标时文字仍被截断失败？检查内联子元素
按钮里嵌了 <i class="bi bi-download"></i> 或 <span></span> 后，text-overflow: ellipsis 经常失效——因为图标容器本身可能继承了 white-space: nowrap，或者其 display 值（如 inline-flex）干扰了文本流。
解决方法：
- 给图标元素加
style="white-space: normal;"，解除对整行的锁定 - 确保图标和文字在同一行内联上下文中，避免用
flex包裹文字部分 - 更稳妥的结构：
<button><span class="d-inline-flex align-items-center"><i></i><span class="ms-1">文字</span></span></button>，然后只对最外层button设截断样式
真正难的不是写对这三行 CSS，而是每次都要打开开发者工具，盯着 computed 的 white-space 和 overflow 值看——因为 Bootstrap 版本、主题定制、父容器布局、图标组件库，任何一个环节都可能悄悄覆盖你的设置。
