仅适用于语义上同一段内容需视觉断行的场景，如地址、诗句、签名；结构化数据应使用语义化标签，段落分离必须用多个而非。

HTML 里用
换行，但多数时候它不该是你第一选择。

什么时候必须用


只有语义上“同一段内容里需要视觉断行”时才合适。比如地址、诗、歌词、签名落款——这些本就是连续文本，但排版需要换行。

常见错误现象：

姓名：张三
电话：123

被当成结构化数据写，其实该用

或

+ CSS；

第一段

第二段

本质是两段，却硬塞进一个

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

。

• 真实使用场景：邮件签名、诗句排版、纯文本列表（无语义层级）
• 
是空元素，不闭合也行（
或
都可），但别写成
—— 浏览器会当成两个换行
• 它不产生块级盒，不影响布局流，也不触发 BFC，所以对浮动、flex 等几乎没干扰

和

为什么不能靠
模拟段落

因为语义错位。浏览器和读屏软件依赖标签含义理解内容，
只是“这里压个车”，不是“这是新一段”。

使用场景：你想让搜索引擎知道这是两个独立观点，或希望屏幕阅读器停顿两次？那必须用两个

，而不是一个

加
。

• SEO 和无障碍支持都更信任语义标签，
在 aria-label 或语音节奏上不被识别为分隔
• CSS 控制段间距（如 margin-bottom）只对块级容器生效，
上加样式无效
• 移动端缩放时，
换行位置固定，而
  宽度变化后自动重排，更健壮

CSS 替代方案：哪些情况该用 white-space 或 display

当原始文本自带换行符（比如用户输入的评论、日志输出），又不想手动插
，就该交由 CSS 处理。

常见错误现象：后端返回带 \n 的字符串，前端直接 innerHTML 渲染，结果所有换行消失——因为 HTML 默认合并空白符。

• 保留换行+空格：给容器加 style="white-space: pre-wrap;"，\n 变成换行， 不合并，且内容仍可折行
• 严格等宽排版（如代码片段）：用 white-space: pre;，但注意不折行可能溢出
• 完全不用换行符：把块元素设为 display: inline-block; 或用 flex 布局控制顺序，比塞一堆
更可控

React/Vue 里动态插入换行的坑

JSX 和模板语法里，\n 字符不会自动转成
，也不能直接在 { } 里写
（会报错或被当字符串）。

使用场景：渲染用户提交的带换行的富文本摘要、后台日志预览。

• React 中正确做法：{text.split('\n').map((line, i) => {line}
)}
• Vue 中避免用 v-html 直接插
，除非你 100% 信任内容——XSS 风险高，优先用 white-space: pre-wrap
• 服务端返回的 HTML 字符串含
？确保它已正确转义，否则
会显示为字面量

真正难的不是怎么换行，而是判断这一行到底该不该“换”——是内容结构变了，还是只是眼睛想歇一下。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！