<br>在button中失效，因button默认white-space: nowrap压制换行；须显式设white-space: normal或pre-line，并配合display: block/inline-block和width才能生效。
button里直接用
会失效，因为默认white-space: nowrap
浏览器给button元素设了white-space: nowrap，所以即使你在HTML里写<button>第一行<br>第二行</button>，<br>也不会生效——它被CSS压制了。这不是bug，是规范行为。
常见错误现象：<br>在button里完全没反应；手动敲回车或加多个空格也没用；用innerHTML动态插入<br>照样不换行。
- 必须显式覆盖
white-space，设为normal、pre-line或pre-wrap -
white-space: normal最常用：允许自动折行，忽略源码换行符 -
white-space: pre-line适合后端返回带\n的字符串，比如用户输入的多行按钮文案 - 别用
pre，它禁止自动折行，超长文本会撑破容器
设置width + display: block是换行前提
button默认是inline元素，不响应width，所以光设width: 200px没用，文字照样挤成一行溢出。
必须先让它变成块级或可宽控元素：
立即学习“前端免费学习笔记（深入）”；
- 加
display: block或display: inline-block（后者保留行内上下文） - 配合
width（像素值或百分比）和white-space: normal - 加上
text-align: center让多行文字居中，否则默认左对齐 - 注意
padding会影响实际可用宽度，计算时要减去左右内边距
示例CSS：button.wrap-btn { display: block; width: 180px; white-space: normal; text-align: center; }
中文按钮换行常卡在词中间，用word-break不如wbr精准
中文没有空格分隔，word-break: break-all会把“确认收货”切成“确/认/收/货”，阅读困难；word-wrap: break-word又常不触发，因为中文每个字都算“单词”。
更可控的方式是主动标注断行点：
- 在HTML中用
<wbr>（word break opportunity），比如<button>提交订单<wbr>并确认收货信息</button> -
<wbr>不强制换行，只告诉浏览器“这里可以断”，由排版引擎决定是否真断，对中英文都友好 - 比
<br>轻量，不破坏按钮的内联流，也不影响焦点和可访问性 - 现代浏览器全支持，无需polyfill
移动端按钮换行错位？检查font-size和line-height是否固定
在小屏幕下，如果按钮文字突然换行错位、行高塌陷或文字被截断，大概率不是换行逻辑问题，而是字体渲染失控。
关键细节：
- 避免用
em或rem设font-size却不配line-height，缩放时行高可能不匹配 - 用
line-height: 1.4这类无单位值，比line-height: 20px更可靠 - 按钮高度建议用
min-height而非height，留出多行文字伸展空间 - 测试时打开设备模拟器的“禁用字体缩放”选项，排除系统级干扰
真正难调的不是“怎么换行”，而是“换在哪”和“换完还好看”。<wbr>加white-space: normal再配弹性line-height，基本覆盖95%场景。
