按钮换行需设置 white-space: normal 或 break-spaces，超长无空格字符串需配合 overflow-wrap: break-word；Flex 布局下须设 min-width: 0；优先用 padding 控制尺寸，避免固定 height。
按钮文字默认不换行，white-space 是关键开关
HTML 中 <button> 默认把内部文本当做一个不可分割的“块”处理，即使内容超宽，浏览器也会强行压缩字间距或溢出容器，而不是自然折行。根本原因在于其默认的 white-space: pre-wrap（实际是 pre 行为变体，但受 button UA 样式影响常表现为 nowrap）。真正起效的是显式设置 white-space：
-
white-space: normal：允许空格处换行，最常用 -
white-space: break-spaces：保留空格且在空格/换行符处断行（适合带空格的长词） - 避免用
white-space: pre-line—— 它会合并连续空格，可能意外删掉按钮里有意加的空格
用 word-break 或 overflow-wrap 处理超长无空格字符串
如果按钮文字是类似 "thisIsAVeryLongCamelCaseString" 这种没空格的单词，仅靠 white-space: normal 不会换行。这时需要补充断词策略：
-
word-break: break-all：强制在任意字符间断行（包括中文、英文连写），简单粗暴但可能割裂语义 -
overflow-wrap: break-word：只在必要时（内容溢出）才在单词内断行，更安全；对中文天然友好 - 注意：
word-break: break-word是过时写法，应统一用overflow-wrap: break-word
Flex 布局下按钮换行失效？检查 min-width 和 flex-shrink
把 <button> 放进 display: flex 容器时，它默认有 min-width: min-content，会阻止收缩换行。常见现象：按钮宽度撑满父容器，文字挤成一坨。
- 加
min-width: 0解除最小宽度限制 - 或设
flex-shrink: 1（默认是 1，但某些 UA 样式可能覆盖） - 同时确保父容器有明确宽度（如
width: 200px），否则按钮仍按内容自适应
移动端点击区域变小？别忘了 padding 和 line-height 配合
换行后按钮高度增加，但若只依赖 line-height 控制行高，可能造成上下留白不均、点击热区偏移。尤其 iOS Safari 对 button 的默认 line-height 处理较特殊。
立即学习“前端免费学习笔记（深入）”；
- 优先用
padding控制整体尺寸，例如padding: 8px 16px - 如需精确控制单行高度，设
line-height: 1.4（无单位），并配合height: auto - 避免设固定
height—— 换行后内容高度变化，会导致文字被裁剪
min-width: 0 这一条，在 Flex 场景下几乎必现；还有人误以为 word-break: break-word 是标准写法，其实它已被 overflow-wrap 取代。 
