button内换行符无效是因html规范合并空白符；可用强制换行，或设white-space:normal+width实现自动折行，复杂场景建议用role="button"的div模拟。
<button></button> 本身不支持换行，直接写 <button>第一行↵第二行</button> 会被浏览器折叠成单行显示——这是 HTML 解析规则决定的，不是样式问题。
为什么 button 里的换行符无效
HTML 规范规定：元素内联文本节点中的空白符（包括换行、制表、多个空格）会被合并为单个空格。所以即使你写了：
<button> 第一行 第二行 </button>
实际渲染效果等同于 <button>第一行 第二行</button>。这不是 CSS 能解决的底层行为。
用 <br> 强制换行（最简方案）
在 <button></button> 内部插入 <br> 标签是唯一无需 JS 的原生方式：
<button>第一行<br>第二行</button>
-
<br>是 void 元素，必须写成<br>或<br>，不能闭合为<br> - 部分旧版 IE 对
<br>在<button></button>中的支持不稳定，但现代 Chrome/Firefox/Safari/Edge 均无问题 - 避免嵌套其他标签（如
<span></span>）再加<br>，否则可能触发某些浏览器的布局重排异常
用 CSS 控制换行与对齐（更可控）
给 <button></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></button>本身生效，不是子内容） - 移动端 Safari 在某些 zoom 级别下可能忽略
white-space，建议搭配line-height和padding微调视觉节奏
用 <div> 模拟按钮（适合复杂排版）
<p>当需要图标+多行文字+不同颜色高亮等组合时，<code><button></button> 的语义和样式限制太大，改用 <div role="button"> 更灵活：
<pre class="brush:php;toolbar:false;"><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></pre>
<ul>
<li>必须加 <code>role="button" 和 tabindex="0" 保证键盘可访问性
addEventListener('click', handler)，不能依赖原生表单提交click 事件，否则交互不完整<button></button> 直接真正麻烦的不是“怎么换行”，而是换行后行高、垂直居中、焦点 outline 裁剪这些细节——它们不会自动适配，得一行行调。尤其在 flex 容器里，<button></button> 的 align-items 默认值常导致多行文字偏上，容易被忽略。
