不换行因是行内元素且white-space:normal，浏览器视其为普通字符；需用pre-wrap或pre+code组合并确保JSON解析生效。
为什么 标签里的
不换行</H3>
<p>因为 <code> 是行内元素，且默认继承 <code>white-space: normal
，浏览器会把字符串中字面量的 "
"（反斜杠 + 字母 n）当作两个普通字符，而不是真实换行符
。即使后端返回的是带
的 JSON 字段，前端 JS 接收后若未做解析，textContent 赋值进去也不会换行。
用 white-space: pre-wrap 最省事
white-space: pre-wrap 最省事给包裹 code 的容器加这个 CSS，能同时保留换行、空格，并支持自动折行，适合 API 返回的纯文本描述、日志片段等场景：
- 必须作用在
<code>的父元素上，比如<div class="code-block"><code>...</code></div> - 不要直接写
white-space: pre—— 它会禁用自动换行，长代码可能横向溢出 - 移动端需额外加
overflow-x: auto防止截断
replace(/
/g, "<br>")
仅限 innerHTML 场景
如果用 innerHTML 渲染动态内容，可手动替换：
const raw = "console.log('a');
console.log('b');";
element.innerHTML = `<pre class="brush:php;toolbar:false;">${raw.replace(/
/g, "<br>")}`;
注意几个坑：
立即学习“前端免费学习笔记（深入）”；
- 不能对
textContent用这个方法——<br>
是 HTML 标签，textContent会原样显示为字符串 - 原始字符串里若含
<、>，得先做 HTML 转义，否则有 XSS 风险 - 替换后
code内部不再是语义化代码块，部分语法高亮库可能失效
真正想显示代码？别只靠 code 标签
code 本身不处理格式，它只是语义标记。要可靠渲染多行代码，优先组合使用：
- 外层用
<pre>包裹，天然支持换行和空格保留 - 里面嵌套
<code>做语义标注，如<pre><code class="js">...</code></pre> - 再配
white-space: pre或pre-wrap（pre已默认生效，但显式声明更稳妥）
最容易被忽略的一点：从接口拿到的字符串，如果经过 JSON.parse()，里面的
才会变成真实换行符；如果只是拼接或直接赋值，大概率还是字面量 "\n"。检查 typeof raw === "string" && raw.includes("
") 比看控制台输出更靠谱。
