button内<br>无效是因为其默认为inline-block，<br>仅在块级或white-space: pre类环境中生效；应改用white-space: pre-line配合\n换行符，或设display: block后再用<br>。
button里加
为什么没效果？
因为
实操建议：
- 要么把按钮设为
display: block或display: flex，再用<br> - 要么改用
white-space: pre-line配合真实换行符（\n），而非HTML标签 - 检查是否被CSS重置（如某些UI库把
button设为display: block但没处理white-space）
white-space: pre-line 和 normal 哪个适合按钮换行？
white-space: normal是按钮默认行为，但多数浏览器给button设了white-space: nowrap（尤其在重置样式后），所以显式写normal才管用；pre-line则能识别文本里的\n并转成换行，更适合动态拼接的多行文案。
区别很实际：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
normal：空格合并，自动折行，适合纯中文或带空格的短句 -
pre-line：保留\n换行，合并多余空格，适合后端返回含换行符的字符串（如"确认\n支付"） - 别用
pre——它禁止自动换行，长文本会横向溢出
为什么加了white-space还是不换行？
根本不是white-space失效，而是它只控制「文本渲染」，不改变盒模型。常见卡点：
- 父容器是
display: flex且没设flex-wrap: wrap，子按钮被强行压成一行 - 按钮本身设了
width: 100%或flex: 1，宽度撑满后内容反而因空间不足被迫折行（此时white-space: normal才起作用） - 按钮里嵌了
<span>或<div>等块级子元素，它们独占一行，导致视觉上“换行”其实是子元素造成的 - 用了
word-break: break-all或overflow-wrap: break-word，它们会主动断词，干扰white-space的换行逻辑
想让按钮文字居中换行，CSS怎么写？
单靠text-align: center只能水平居中，多行文字垂直对齐还得靠line-height或flex。推荐两种稳方案：
- 用
display: flex; align-items: center; justify-content: center;+white-space: pre-line，适合现代布局 - 保持
display: inline-block，设line-height为按钮高度（如height: 40px; line-height: 40px;），但仅适用于固定高、行数可控的场景 - 避免用
vertical-align: middle——它只对行内元素有效，且依赖父容器line-height，容易和white-space冲突
复杂点在于：换行与否最终由宽度、字体大小、空格位置共同决定，white-space只是开关，不是万能调节器。调试时务必在DevTools里看computed styles，确认display和white-space是否真按你预期生效。
