最直接的换行方式是使用标签；它专用于强制换行，适用于地址、诗歌等需紧凑换行的场景，且为自闭合标签，不可嵌套滥用或连续堆叠。
用 <br> 是最直接的换行方式
HTML 默认忽略换行符和多余空格，写在源码里的回车不会变成页面上的换行。所以想让“一句话”在指定位置断开，<br> 就是专干这事的标签。
常见错误现象：
– 写了换行符或 \n 字符串，但页面没反应
– 用 <p></p> 包两句话，结果多了段间距，不是想要的紧凑换行
使用场景：
– 地址、诗歌、签名档这类需要控制行停顿但又不希望语义分段的内容
– 表单提示文字中插入简短换行（比如「密码需包含：<br>大小写字母 + 数字」）
实操建议：
– 直接在文本中间插入 <br>，它是个自闭合标签，不用配对
– 不要嵌套在 <p></p> 里再滥用——如果逻辑上真是两段内容，就该用两个 <p></p>
– 避免连续写多个 <br><br><br> 来“调间距”，那属于样式问题，该用 CSS
立即学习“前端免费学习笔记（深入）”；
CSS 的 white-space 能保留源码换行
如果你有一段预设好换行的文本（比如从后端吐出带 \n 的字符串），又不想手动插 <br>，那就靠 CSS 控制空白符渲染行为。
常见错误现象：
– JS 拼接字符串时用了 \n，但插入到 <div> 后还是连成一行<br>– 误以为 <code>display: block 或 line-height 能让换行符生效
参数差异：
– white-space: pre：保留空格和换行，但不自动换行（类似 <pre class="brush:php;toolbar:false;"></pre>）
– white-space: pre-wrap：保留换行和空格，且允许长单词折行（最常用）
– white-space: normal（默认）：合并空白，忽略换行
实操建议：
– 后端返回含 \n 的文本时，前端容器加 style="white-space: pre-wrap;"
– 不要用 pre 标签硬套——它有默认等宽字体和 margin，语义也不对
– 注意兼容性：所有现代浏览器都支持 pre-wrap，IE9+ 也没问题
别用 <p></p> 或 <div> “假装”换行
<p>有人把一句话拆成多个 <code><p></p> 或 <div>，以为能控制换行，结果发现行距变大、语义错乱、SEO 受损。
<p>使用场景：<br>– 真正独立的段落才用 <code><p></p>，比如文章正文每一段
– <div> 是通用块容器，本身不带换行语义，只是默认 display 为 block
<p>性能 / 兼容性影响：<br>– 多余标签增加 DOM 节点数，对极大量文本渲染有轻微负担<br>– 屏幕阅读器会把每个 <code><p></p> 当作一个语义段落播报，打断阅读流
实操建议：
– 一句话内的换行，永远优先考虑 <br> 或 white-space
– 如果需要响应式换行（比如小屏强制断行），用 word-break 或 overflow-wrap，而不是切标签
– 检查 DevTools 中元素是否被意外设置了 margin 或 padding，那才是“看起来像换行”的真凶
JS 动态插入换行要小心 <br> 转义
用 JS 设置 innerHTML 时，如果字符串里写了 <br>，它会被当 HTML 渲染；但如果用 textContent 或模板字符串拼错了，就可能变成纯文本显示出来。
常见错误现象：
– 页面上直接看到 <br> 四个字符，而不是换行
– 使用 document.write() 或旧式字符串拼接，导致 XSS 风险
– 在 Vue/React 里用 v-html 或 dangerouslySetInnerHTML 却没过滤内容
实操建议：
– 纯文本插入用 textContent，需要换行就提前把 \n 替换成 <br>，再用 innerHTML
– 更安全的做法：用 split('\n').map(line => document.createElement('div')).forEach(...) 构建节点
– 如果内容来自用户输入，必须先做 HTML 转义（如把 变成 <code><），再决定是否允许 <br>
<br>、CSS 和语义标签时，最容易在协作代码里留下“为什么这里多了一行”的疑问。留心 source 和 rendered 的差异，比死记规则管用。
