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


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

什么时候必须用
？

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

• 地址：

  北京市朝阳区建国路8号
  SOHO现代城A座1208室
  邮编：100022

• 诗歌：

  白日依山尽，
  黄河入海流。
  欲穷千里目，
  更上一层楼。

• 避免在
  、 或表单控件里滥用 —— 它们不是文本容器，加
可能导致布局错位或焦点顺序混乱


的写法和常见错误

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

• 错误写法：
文本 ——
是空元素，不能闭合
• 错误嵌套：

  
  
  

  生成多余空白行，视觉上像段落间距，但实际没有 margin 控制力
• 不要用它替代
  分段：比如新闻正文里用多个
拆分段落，SEO 和语义化都会受损

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

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

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

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



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

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

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