HTML中换行需用、或white-space属性，因浏览器默认忽略\n；推荐white-space:pre-line兼顾兼容与排版，服务端\r\n需预处理为\n。
换行符在 HTML 里不生效，\n 是摆设
HTML 默认忽略所有连续空白字符（包括 \n、\t、多个空格），所以直接把带换行的字符串塞进 <p></p> 或 <div>，浏览器会全压成一行显示。
<p>常见错误现象：<code>console.log("第一行\n第二行") 在控制台看着有换行，但 document.body.innerHTML = "第一行\n第二行" 渲染出来还是“第一行第二行”。
- 真正起作用的是 HTML 标签，不是文本里的
\n - 服务端返回的纯文本（比如 API 响应体）或用户输入的
<textarea></textarea>内容，也得靠标签或 CSS 处理换行 - 别试图用
white-space: pre全局兜底——它会连空格和缩进都保留，破坏排版
<br> 是最直接的换行方式，但别手抖多写
想让“第一行”下面立刻空一行出“第二行”，就在中间插一个 <br> 标签：
document.body.innerHTML = "第一行<br>第二行";
使用场景：简单静态文案、邮件模板、后台管理界面的提示语等对结构要求不高的地方。
立即学习“前端免费学习笔记（深入）”；
-
<br>是空元素，不需要闭合（<br>即可，<br>也可，但没必要加斜杠） - 连续写多个
<br>会产生多余空白行，视觉上难控制，不如用 CSS 的margin或padding - 别在语义化容器里滥用，比如
<h3>标题<br>副标题</h3>—— 副标题应该用独立标签，不是靠<br>挤下去
用 <pre class="brush:php;toolbar:false;"></code> 保留原始换行和空格，但要小心缩进泄露</H3>
<p><code><pre class="brush:php;toolbar:false;"></code> 会原样渲染文本中的 <code>\n</code> 和空格，适合日志、代码块、ASCII 图这类需要格式对齐的内容。</p>
<pre class="brush:php;toolbar:false;">document.body.innerHTML = "<pre class="brush:php;toolbar:false;">第一行\n 第二行（前面有两个空格）\n第三行</pre>";
<p>性能/兼容性影响：几乎无负担，所有浏览器支持几十年了。但注意两点：</p>
<ul>
<li>
<code><pre class="brush:php;toolbar:false;"></pre> 默认是等宽字体，且自带上下外边距，可能和页面其他文字风格冲突
`第一行\n 第二行` 里的空格会被真实渲染——这不是 bug，是 <pre class="brush:php;toolbar:false;"></pre> 的本职工作<pre class="brush:php;toolbar:false;" style="font-family: inherit"></pre>
CSS 的 white-space 属性更灵活，但值选错就白忙
想让普通标签（比如 <p></p>）也认 \n，用 white-space 最靠谱。关键是选对值：
-
white-space: pre-line：推荐首选。合并空白符，但保留\n换行，且自动折行（适合用户评论、富文本摘要） -
white-space: pre-wrap：保留\n和空格，也允许折行（适合代码注释、带缩进的配置说明） -
white-space: pre：全保留，不折行——长文本会撑破容器，必须配overflow-wrap: break-word救场 - 别用
normal（默认值）或nowrap，它们直接无视\n
示例：<p style="white-space: pre-line">第一行\n第二行</p> —— 这才是日常最稳的方案。
容易被忽略的是：服务端返回的字符串如果来自数据库字段，可能含 \r\n（Windows 换行），而前端 JS 通常只处理 \n。真要兼容，得先 .replace(/\r\n/g, '\n')。
