如何在网页中插入换行符：Br标签实现强制文本折行

<br>仅适用于地址、诗歌等“换行即内容”的场景；禁用于标题、按钮等非文本容器；必须用<br>而非<br/>或</br>；配合white-space: pre-line处理后端n；超长字符串需用overflow-wrap: break-word而非<br>。

<br> 是唯一能直接在 HTML 文本流中插入单次换行的原生方式，但它不是万能的——用错地方会破坏语义、影响可访问性，甚至被屏幕阅读器跳过。

什么时候必须用 <br>？

它只适合「换行即内容」的场景，比如地址、诗歌、歌词、签名档这类天然需要逐行对齐的文本。

• 地址：<p>北京市朝阳区建国路8号<br>SOHO现代城A座1208室<br>邮编：100022</p>
• 诗歌：<p>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。</p>
• 避免在 <h1>、<button> 或表单控件里滥用 —— 它们不是文本容器，加 <br> 可能导致布局错位或焦点顺序混乱

<br> 的写法和常见错误

HTML5 中只接受 <br>（无斜杠），<br /> 是 XHTML 遗留写法，现代项目里混用可能触发 quirks mode 或校验警告。

• 错误写法：<br>文本</br> —— <br> 是空元素，不能闭合
• 错误嵌套：<p><br><br></p> 生成多余空白行，视觉上像段落间距，但实际没有 margin 控制力
• 不要用它替代 <p> 分段：比如新闻正文里用多个 <br> 拆分段落，SEO 和语义化都会受损

后端返回带 n 的文本，前端怎么换行？

直接把含换行符的字符串塞进 v-html 或 innerHTML 不会生效，浏览器默认忽略所有空白字符。必须配合 CSS 或预处理。

• 推荐方案：给容器加 white-space: pre-line; —— 保留源码中的 n，合并多余空格，且允许自动折行
• Vue 场景下别手动 .split('n').map(...) 插 <br>，容易 XSS（除非严格转义）；用 v-html + pre-line 更安全简洁
• 若需兼容 IE11，pre-wrap 比 pre-line 兼容性更好，但会多保留空格，注意前后空格是否影响排版

长单词/URL 不换行？别只盯着 <br>

<br> 对超长无空格字符串（如 Base64、JWT、长 URL）完全无效。这类问题本质是「断词」，得靠 CSS。

• 优先用 overflow-wrap: break-word;：只在必要时切单词，保持可读性
• 慎用 word-break: break-all;：会在任意字符间断开，中文也拆字，影响阅读
• 如果容器宽度固定且内容不可控，建议组合使用：overflow-wrap: break-word; word-break: keep-all;，兼顾英文断词与中文完整性

真正难的不是“怎么换行”，而是判断该不该换、由谁来换——<br> 是手术刀，不是胶带；CSS 的 white-space 和 overflow-wrap 才是应对真实业务文本的常规武器。别让一个换行符，悄悄毁掉响应式布局和无障碍体验。