white-space: nowrap 是按钮文本不换行的前提，但单独使用无效；必须配合 width/max-width、overflow: hidden 和 text-overflow: ellipsis 才能实现单行省略，且需注意 display 类型、min-width: 0（flex 中）、文本容器定位等细节。
white-space: nowrap 是按钮文本不换行的前提
按钮默认会根据内容自动撑宽，但一旦父容器设了 max-width 或处于 Flex/Grid 布局中，按钮内部文字就可能被强制折行——这会破坏按钮视觉完整性，尤其在紧凑 UI（如工具栏、表格操作列）里显得突兀。加 white-space: nowrap 就是告诉浏览器：“别拆这行，哪怕超出去”。它不是“让按钮变宽”，而是“阻止文字自己断行”，这是后续溢出控制的起点。
不加 nowrap 时 text-overflow: ellipsis 完全无效
text-overflow: ellipsis 只对单行溢出生效，而默认状态下按钮内文本是可换行的。即使你写了 overflow: hidden 和 text-overflow: ellipsis，只要没配 white-space: nowrap，浏览器就会优先折行，根本不会触发“单行溢出”逻辑，省略号自然不会出现。
- 常见错误写法：
.btn { overflow: hidden; text-overflow: ellipsis; width: 120px; }→ 文字照常换行，省略号不显示 - 正确组合必须包含：
white-space: nowrap - 如果按钮本身用了
display: flex，还要注意子元素（比如图标+文字）是否意外触发换行，此时需在文字容器上单独加white-space: nowrap
nowrap 和 overflow: hidden 配合才真正“裁剪”按钮内容
只加 white-space: nowrap 会让文字横向冲出容器边界，看起来像 bug；必须搭配 overflow: hidden 才能隐藏溢出部分。但要注意：父容器如果本身设置了 overflow: hidden，而按钮又用了 position: absolute 或 transform，可能造成裁剪失效——这时候得检查裁剪上下文（clipping context），而不是怪 nowrap 没用。
- 按钮宽度由内容撑开时，
width或max-width必须显式设置，否则overflow: hidden无作用范围 - 在 Flex 容器中，按钮默认有
min-width: auto，可能抵消width设置，必要时加min-width: 0 -
overflow: hidden会同时裁剪边框、阴影、伪元素等，若需保留视觉延伸效果，得把裁剪逻辑上移到更外层容器
按钮内多元素时 nowrap 要加在具体文本容器上
很多按钮内部不止纯文本，还混着图标、Badge 或 span 标签。这时直接给 button 加 white-space: nowrap 可能无效——因为图标和文字是不同元素，默认布局行为不同。更稳妥的做法是把文本内容包在 span 里，并只对这个 span 应用 white-space: nowrap。
- 错误：
button { white-space: nowrap; }→ 图标和文字之间空格仍可能被压缩或换行异常 - 推荐：
button span.text { white-space: nowrap; }，配合overflow: hidden和text-overflow: ellipsis - 若用 SVG 图标，确保它设了
flex-shrink: 0，避免被 Flex 压缩导致布局错位
white-space: nowrap 不解决宽度问题，只解决换行问题；它必须和明确的尺寸约束 + 溢出裁剪一起工作，缺一不可**。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
