HTML中无“多行文本按钮”，button默认单行且换行符被合并，需用CSS（white-space、word-break、width）强制换行；textarea原生支持多行输入但非按钮，语义和功能均不同。
HTML里没有“多行文本按钮”这种标准元素——<button> 默认只支持单行文本，强行换行需靠 CSS；而真正原生支持多行输入的是 <textarea>，它不是按钮，是可编辑文本域。
为什么 button 不能直接换行？
<button> 的内容默认按 inline 元素渲染，空格、换行符会被合并为一个空格。即使写成：
<button>第一行 第二行</button>
浏览器仍会显示为“第一行 第二行”。这不是 bug，是 HTML 规范行为。
让 button 显示多行的唯一可靠方式
必须用 CSS 强制换行，且需同时处理以下三点：
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre-wrap或pre-line：保留换行符并允许折行 -
word-break: break-word或overflow-wrap: break-word：防止长单词撑破容器 - 显式设置
width（如width: 120px）：否则按钮宽度自适应，换行无效
示例：
<button style="white-space: pre-wrap; width: 120px;">确认 删除</button>
textarea 不是按钮，但常被误当作“多行输入按钮”
如果你实际想要的是用户能输入多行文字的控件，那应该用 <textarea>，不是 <button>：
-
<textarea rows="4" cols="30"></textarea>：原生支持滚动和换行 - 它没有点击提交逻辑，要配合
<input type="submit">或 JS 手动触发 - 若想“看起来像按钮”，可用 CSS 重置边框/背景，但语义仍是输入域，不可忽略
name属性否则表单不提交
容易被忽略的关键点
用 CSS 强制 button 换行时，padding 和 line-height 会显著影响垂直居中效果；移动端 Safari 对 white-space: pre-wrap 支持不稳定，建议加 display: block 并测试真机；而 <textarea> 的 rows 值只是“建议行数”，实际高度由内容和 font-size 决定，别指望它像素级精确。
