button内换行符无效是因HTML规范合并空白符；可用强制换行，或设white-space:normal+width实现自动折行，复杂场景建议用role="button"的div模拟。
<button> 本身不支持换行，直接写 <button>第一行↵第二行</button> 会被浏览器折叠成单行显示——这是 HTML 解析规则决定的，不是样式问题。
为什么 button 里的换行符无效
HTML 规范规定：元素内联文本节点中的空白符（包括换行、制表、多个空格）会被合并为单个空格。所以即使你写了：
<button> 第一行 第二行 </button>
实际渲染效果等同于 <button>第一行 第二行</button>。这不是 CSS 能解决的底层行为。
用 <br> 强制换行（最简方案）
在 <button> 内部插入 <br> 标签是唯一无需 JS 的原生方式：
立即学习“前端免费学习笔记（深入）”；
<button>第一行<br>第二行</button>
-
<br>是 void 元素，必须写成<br>或<br />，不能闭合为<br></br> - 部分旧版 IE 对
<br>在<button>中的支持不稳定，但现代 Chrome/Firefox/Safari/Edge 均无问题 - 避免嵌套其他标签（如
<span>）再加<br>，否则可能触发某些浏览器的布局重排异常
用 CSS 控制换行与对齐（更可控）
给 <button> 设置 white-space: normal 并配合宽度限制，可让长文本自动折行：
<button style="white-space: normal; width: 120px;">这是一段足够长的文字会自动换行</button>
-
white-space: normal覆盖默认的white-space: pre-wrap行为 - 必须显式设置
width（或max-width），否则按钮会撑满父容器，无法触发折行 - 若需居中多行文字，加
text-align: center；若需顶部对齐，加vertical-align: top（注意：vertical-align对<button>本身生效，不是子内容） - 移动端 Safari 在某些 zoom 级别下可能忽略
white-space，建议搭配line-height和padding微调视觉节奏
用 <div> 模拟按钮（适合复杂排版）
当需要图标+多行文字+不同颜色高亮等组合时，<button> 的语义和样式限制太大，改用 <div role="button"> 更灵活：
<div role="button" tabindex="0" style="display: inline-block; padding: 8px 12px; border: 1px solid #ccc; background: #fff; cursor: pointer;"> <strong>操作标题</strong><br> <small>副说明文字</small> </div>
- 必须加
role="button"和tabindex="0"保证键盘可访问性 - 点击事件需用 JS 绑定：
addEventListener('click', handler)，不能依赖原生表单提交 - 按空格/回车触发时，要手动模拟
click事件，否则交互不完整 - 如果按钮参与表单提交，此方案需额外处理数据收集逻辑，不如原生
<button>直接
真正麻烦的不是“怎么换行”，而是换行后行高、垂直居中、焦点 outline 裁剪这些细节——它们不会自动适配，得一行行调。尤其在 flex 容器里，<button> 的 align-items 默认值常导致多行文字偏上，容易被忽略。
