当父容器宽度小于按钮自身宽度时，通过设置 `white-space: nowrap` 可阻止按钮内文本换行，并结合 `overflow: hidden` 实现内容截断，确保按钮始终以设定宽度（如200px）独立渲染，不受父容器尺寸限制。
在默认文档流中，<button> 是内联级可替换元素，其宽度受父容器约束，且内部文本会自动折行以适应可用空间。若希望按钮无视父容器宽度限制、坚持自身设定尺寸（如 width: 200px）并强制单行显示，关键在于两点：
- 阻止文本换行：使用 white-space: nowrap 确保按钮内文字不折行；
- 允许视觉溢出与裁剪：父容器需设 overflow: hidden（已存在），同时确保按钮不被弹性布局或 max-width: 100% 压缩——后者正是原代码中的干扰项。
✅ 正确做法是移除 max-width: 100%（它会覆盖 width: 200px），并显式添加 white-space: nowrap：
.container {
display: flex;
align-items: center;
width: 180px;
height: 50px;
background-color: #ddd;
overflow: hidden; /* 裁剪溢出部分 */
}
.container button {
width: 200px; /* 强制固定宽度 */
white-space: nowrap; /* 关键：禁用换行 */
overflow: hidden; /* 隐藏超出部分（可选，增强可控性） */
background: green;
border: none;
padding: 0;
margin: 0;
}⚠️ 注意事项：
- max-width: 100% 与 width: 200px 冲突，必须删除前者，否则按钮将被限制在父容器宽度内；
- 若父容器为 Flex 容器（如本例），还需确认子元素（<div>）未设置 flex-shrink: 1（默认值），否则它可能压缩内部按钮。可添加 .container > div { flex-shrink: 0; } 进一步保障；
- 实际项目中，建议搭配 text-overflow: ellipsis 和 overflow: hidden 实现优雅截断（需同时设 display: block 或 inline-block）：
.container button {
display: block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}综上，white-space: nowrap 是实现按钮“强硬溢出”的核心 CSS 属性，配合合理的宽度声明与布局控制，即可稳定达成设计目标。
立即学习“前端免费学习笔记（深入）”；
