当父容器宽度小于按钮固有宽度时，通过设置 `white-space: nowrap` 可阻止按钮内文本折行，并配合合理 overflow 控制，实现按钮强制保持原始尺寸、横向溢出父容器的效果。
在默认文档流中，内联级元素（如 <button>）会受父容器宽度限制，自动换行或收缩以适应布局。但有时业务需求要求按钮严格保持指定宽度（例如 200px），即使父容器仅宽 10px，也不压缩、不折行、不换行，而是整体向右溢出——这正是 white-space: nowrap 的核心用途。
关键在于：white-space: nowrap 会禁止元素内文本的自动换行行为，使内容强制保持单行；结合 overflow: hidden（作用于父容器）或 overflow: visible（默认，允许溢出），即可精准控制溢出表现。
以下是推荐的完整实现方案：
.container {
display: flex;
align-items: center;
width: 180px;
height: 50px;
background-color: #ddd;
overflow: hidden; /* 隐藏超出部分（可选） */
}
.container button {
width: 200px; /* 强制固定宽度 */
background: green;
color: white;
border: none;
padding: 0 12px;
white-space: nowrap; /* ✅ 核心：禁止文本换行 */
overflow: visible; /* 确保不裁剪自身（默认值，显式声明更清晰） */
}<div class="container">
<div>
<button>I need overflow this button in one line</button>
</div>
</div>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- max-width: 100% 与 width: 200px 冲突，应移除前者，否则在窄容器中可能被覆盖；
- 若希望按钮完全“突破”父容器边界（包括阴影、边框等视觉延伸），需确保父容器未设置 overflow: hidden，或将其设为 visible/initial；
- 在 Flex 布局中，子项默认遵循 min-width: auto，可能阻碍收缩——若仍出现意外缩放，可额外添加 min-width: 0 或 flex-shrink: 0 到按钮上；
- 移动端需注意 user-select: none 或 touch-action: manipulation 等交互优化，避免误操作。
总结：white-space: nowrap 是解决“强制单行 + 溢出”问题的语义化、轻量级方案，无需 JavaScript 或复杂 hack，兼容性极佳（支持所有现代浏览器及 IE9+），是 UI 组件库中处理紧凑按钮溢出场景的标准实践。
