white-space: nowrap 仅控制文本换行，不改变盒模型；按钮换行主因是 display 变为 block、父容器 flex 换行、子元素块级化或宽度受限，需配合 display: inline-block、宽度限制、overflow: hidden 和 text-overflow: ellipsis 实现单行省略。
white-space: nowrap 为什么加了还是换行
根本原因不是 white-space: nowrap 失效，而是它只控制「文本内容」的换行行为，不改变元素本身的盒模型。常见现象：给一个 <button></button> 或 <div> 加了 <code>white-space: nowrap，文字依然断成两行——大概率是因为该元素是块级（如 display: block）或 flex 子项被压缩，导致视觉上“被挤下去”。
实操建议：
- 确认按钮是否显式设为
display: inline-block或保持默认内联特性（如<button></button>原生是inline-block，但某些重置样式可能改成block） - 检查父容器是否为
display: flex且未设flex-wrap: nowrap，此时子项即使white-space: nowrap，也可能因 flex 换行策略被折行 - 避免和
word-break: break-all或overflow-wrap: break-word同时使用，它们会主动打断单词，覆盖nowrap效果
button 元素加 nowrap 仍换行的典型场景
原生 <button></button> 在多数浏览器中默认是 inline-block，理论上支持 white-space: nowrap。但以下情况会破坏这一前提：
- 全局 CSS 重置（如 normalize.css 或某些 UI 库）把
button设为display: block，此时需手动还原或加display: inline-block - 按钮内嵌了
<span></span>或其他块级子元素，它们自身占满一行，导致父按钮“撑高”并看起来换行 - 设置了
width: 100%或flex: 1，使按钮宽度被拉伸后内容被迫折行（nowrap只防换行，不防溢出）
验证方式：在 DevTools 中检查 computed styles，看 display 是否为 inline-block 或 inline，且 white-space 确实生效。
实现单行按钮 + 省略号的三要素缺一不可
想让按钮文字超长时显示 “…” 而非换行或溢出，仅加 white-space: nowrap 不够。必须同时满足：
- 容器有明确宽度限制（
width、max-width或受 flex-shrink 控制）；百分比宽度在某些 flex 场景下会失效 white-space: nowrap-
overflow: hidden+text-overflow: ellipsis
示例：
.btn {
display: inline-block;
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
注意：text-overflow: ellipsis 对 display: inline 元素无效，所以按钮若被设为纯 inline，需包裹一层 inline-block 容器或直接用 inline-block。
移动端按钮换行问题的隐藏陷阱
在小屏幕设备上，按钮文字换行常被误判为样式问题，实则源于 viewport 或字体缩放干扰：
- 未设置
<meta name="viewport" content="width=device-width, initial-scale=1">，导致 iOS Safari 自动缩放文本引发换行 - 系统级“更大字体”辅助设置开启后，
em/rem单位可能放大到超出容器，nowrap无法阻止物理溢出 - 某些安卓 WebView 对
text-overflow: ellipsis支持不稳定，建议 fallback 使用 JS 截断或服务端预处理
真正可靠的单行按钮控制，依赖的是「固定布局约束 + 显式 display + 白空格策略」三者闭环，而不是只盯住 white-space 这一个属性。
