br标签仅用于同一语义段落内必须保留人工断行的场景，如地址、诗歌、歌词等；其他换行需求应使用或CSS实现。
<br> 不是通用换行工具，只在地址、诗歌、歌词等「换行即内容」的固定结构中合法使用；其他场景用 <p></p> 或 CSS 更安全、更可控。
什么时候必须用 <br>
它只解决一个具体问题：同一语义段落内，必须保留某处人工指定的断行位置，且该位置不可被响应式或字体变化影响。
- 地址块：
<p></p>上海市浦东新区张江路123号<br>邮编:200120——两行属于同一地址实体 - 古诗原文：
<p></p>明月松间照<br>清泉石上流<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>——删掉<br>就破坏诗句结构 - 表单内联提示：
<label></label>用户名：<br><span class="error"></span>不能为空（但更推荐display: block）
为什么 <br> 在按钮或 flex 容器里不生效
它依赖父容器支持文本换行的渲染上下文。如果父级设置了 white-space: nowrap、display: flex（默认 flex-wrap: nowrap），或包裹在 <span></span> 里又被设了 inline 行为，<br> 就会被浏览器忽略。
- 检查方式：用开发者工具看目标元素的
computed white-space和display - 修复思路：不是加更多
<br>，而是改父级样式，比如加flex-wrap: wrap或white-space: pre-line - 特别注意：React 中写
{"text<br>text"}是字符串字面量，不会解析成标签；Vue 的v-html虽能渲染，但用户输入内容直接插有 XSS 风险
后端返回带
的字符串，前端怎么让换行生效
直接塞进 innerHTML 或 v-html 不会显示换行——HTML 默认合并所有空白符，
被当普通空格处理。
- ✅ 推荐方案：给容器加
white-space: pre-line，并确保字符串里真有\n） - ⚠️ IE11 兼容可选
white-space: pre-wrap，但会保留前后空格，可能多出空白 - ❌ 别手动
.split(' ').map(...)拼<br>—— 易引入 XSS，绕过框架响应式机制 - ❌ 别用
<pre class="brush:php;toolbar:false;"></pre>包普通文本 —— 等宽字体 + 无法自动折行，排版失控
怎么快速清理页面里无效的 <br>
冗余 <br> 多出现在富文本粘贴、SSR 渲染压缩、或老式 CMS 输出中，它们不贡献语义，只拖慢可访问性和响应式表现。
- 先禁用 CSS 查看原始结构，确认哪些
<br>前后都没有兄弟节点（孤立） - 执行脚本一键清理：
document.querySelectorAll('br').forEach(br => { if (!br.previousElementSibling && !br.nextElementSibling) br.remove(); }) - 重点排查：
<p></p>开头/结尾的<br>、紧邻<h2></h2>或<div> 的、被空 <code><div> 包裹的 —— 这些基本无意义 <p>真正难的不是“怎么加 <code><br>”，而是判断“这里该不该由 HTML 控制换行”。它像一把手术刀，只切固定结构；其余所有动态、响应式、用户输入的换行需求，都该交给 CSS 处理。
