button内换行符无效是因HTML规范合并空白符；可用强制换行，或设white-space:normal+width实现自动折行，复杂场景建议用role="button"的div模拟。

本身不支持换行，直接写 第一行↵第二行 会被浏览器折叠成单行显示——这是 HTML 解析规则决定的，不是样式问题。

为什么 button 里的换行符无效

HTML 规范规定：元素内联文本节点中的空白符（包括换行、制表、多个空格）会被合并为单个空格。所以即使你写了：

<button>
第一行
第二行
</button>

实际渲染效果等同于 第一行 第二行。这不是 CSS 能解决的底层行为。

用
强制换行（最简方案）

在 内部插入
标签是唯一无需 JS 的原生方式：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

<button>第一行<br>第二行</button>

• 
是 void 元素，必须写成
或
，不能闭合为

• 部分旧版 IE 对
在 中的支持不稳定，但现代 Chrome/Firefox/Safari/Edge 均无问题
• 避免嵌套其他标签（如 ）再加
，否则可能触发某些浏览器的布局重排异常

用 CSS 控制换行与对齐（更可控）

给 设置 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 对 本身生效，不是子内容）
• 移动端 Safari 在某些 zoom 级别下可能忽略 white-space，建议搭配 line-height 和 padding 微调视觉节奏

用

模拟按钮（适合复杂排版）

当需要图标+多行文字+不同颜色高亮等组合时， 的语义和样式限制太大，改用

更灵活：

<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 事件，否则交互不完整
• 如果按钮参与表单提交，此方案需额外处理数据收集逻辑，不如原生 直接

真正麻烦的不是“怎么换行”，而是换行后行高、垂直居中、焦点 outline 裁剪这些细节——它们不会自动适配，得一行行调。尤其在 flex 容器里， 的 align-items 默认值常导致多行文字偏上，容易被忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！