<br>仅适用于地址、诗歌、签名档等同一语义单元内需强制折行的场景；按钮、标题中禁用，应改用CSS实现视觉换行；<wbr>是唯一语义友好的换行提示符。
<br> 不该用来制造段落分隔，也不该插在按钮文字或标题里——它会干扰屏幕阅读器的自然语流，让“确认”被读成“确认”。
什么时候必须用 <br>
仅限内容逻辑上属于同一语义单元、但视觉上需强制折行的场景：
- 地址行（如
上海市浦东新区张江路123号<br>邮编:200120） - 诗歌或歌词（每行是独立韵律单位，不能拆成多个
<p>） - 签名档、法律声明末尾的多行署名
这些场景下，<br> 是唯一能保留原始换行意图又不引入额外语义的方式。其他情况一律优先用 <p> 或 CSS。
按钮、链接、标题里别塞 <br>
常见错误：<button>同 意<br>并 提 交</button>。这会导致：
立即学习“前端免费学习笔记（深入）”；
- 语音合成器在
<br>处插入非自然停顿，破坏语义连贯性 - 键盘聚焦时整个按钮仍为单焦点项，但视觉割裂，低视力用户难以定位
- 部分辅助技术可能跳过
<br>后的内容
正确做法：用 CSS 控制视觉折行，例如 white-space: pre-line 配合换行符 \n，或用 flex + flex-wrap: wrap 和 text-align: center 实现居中多行。
white-space 与可访问性陷阱
即使不用 <br>，white-space: pre 或 pre-wrap 也可能带来问题：
-
pre会保留所有空格和换行符，屏幕阅读器可能把整段读作一句话，中间插入冗余停顿 - 用户复制粘贴时，
pre-wrap内容会带出不可见换行符，影响下游系统解析 - 在
display: flex容器中设white-space: normal也没用——子元素默认不换行，得加flex-wrap: wrap
真正安全的组合是：white-space: normal（默认） + overflow-wrap: break-word（防长单词溢出），再用 <p> 或 <div> 做语义分块。
<wbr> 是唯一语义友好型换行提示
处理超长 URL 或无空格标识符时，<wbr> 比 word-break: break-all 更可靠：
- 它不强制换行，只提供“可断点”，浏览器按需决定是否折行
- 不影响语音朗读节奏，屏幕阅读器完全忽略它
- 兼容所有现代浏览器，且不会在纯文本复制中暴露
示例：https://example.com/path/<wbr>to/<wbr>resource?param=<wbr>verylongvalue</wbr></wbr></wbr> —— 只在必要时断开，且断点符合 URL 逻辑结构。
最易被忽略的一点：换行不是样式问题，而是语义契约。你写的每个换行，都在告诉浏览器和辅助技术“这里的内容关系如何”。错用 <br> 或 white-space，等于在悄悄修改这份契约。
