Bootstrap中设置文本不换行的正确样式是text-nowrap，它通过white-space: nowrap实现，但需配合overflow: hidden和text-overflow: ellipsis及明确宽度才能在按钮等元素中可靠生效。
Bootstrap 按钮文字不换行，text-nowrap 不起作用？
直接加 text-nowrap 类在按钮上，大概率没效果——不是类写错了，而是 bootstrap 按钮（.btn）默认是 display: inline-block，它本身不阻止换行；真正生效的是 css 的 white-space: nowrap，但按钮内部文本是否换行，还受父容器、盒模型和 flex/grid 布局干扰。
white-space: nowrap 必须配合明确宽度和溢出控制
只设 white-space: nowrap，文字会强行撑宽按钮，甚至突破容器边界。要让它“不换行但视觉可控”，三者缺一不可：
-
white-space: nowrap（或 Bootstrap 5.3+ 的text-nowrap） -
overflow: hidden（剪掉超出部分） -
text-overflow: ellipsis（显示省略号，需同时有width或max-width）
示例（纯 CSS）：
.btn-no-wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; display: inline-block; }注意：不能对 button 元素直接设 width: 100% 后再加 ellipsis——它必须有明确的、可计算的宽度上限。
Flex/Grid 容器里的按钮，white-space: nowrap 可能被覆盖
如果按钮放在 display: flex 或 display: grid 的父容器中，即使写了 white-space: nowrap，文字仍可能换行。原因有二：
- Flex 项默认
min-width: auto，会阻止内容收缩，导致浏览器“宁可换行也不缩小” - 父容器若设了
flex-wrap: wrap或grid-auto-flow: row，可能间接触发换行
解决方法：
给按钮加 flex-shrink: 0（防止被压缩），并确保其包裹元素或自身有 display: block 或 inline-block；避免对按钮直接设 min-width: 0，那反而会激活换行。
中文、URL、长变量名混排时，white-space: nowrap 不等于“绝对不折”
表面上看 white-space: nowrap 应该锁死不换行，但实际中仍可能断开，常见于：
- 文本含 Unicode 零宽空格（
\u200b）或不间断空格（\u00a0），浏览器视其为合法换行点 - 按钮内嵌了
<span>或其他内联元素，它们继承了不同 white-space 设置 - 服务端注入了软连字符（
）或富文本 HTML 标签，破坏了连续性
调试建议：用浏览器开发者工具选中按钮文本，右键「Edit as HTML」查看原始字符；或临时加 font-family: monospace 辅助识别隐藏符号。真正想杜绝所有换行点，得清理输入源，而非仅靠 CSS。
