pre标签本身有效，但换行不显示的主因是字符串中缺乏真实换行符，需确保后端返回、json解析、js用textcontent赋值、css设white-space:pre及等宽字体全程配合。
pre 是唯一能真正原样输出空格、换行、制表符的 HTML 标签，但它不是“加了就生效”的万能开关——内容本身必须含真实空白符，且注入方式、字体、CSS 都得配合。
为什么 pre 里还是没换行？
最常见原因是：字符串里根本没存真实的
，而是被转义成字面量或被模板/JSON 解析吃掉了。比如后端返回 "line1\nline2"（双反斜杠），JS 解析后得到的是含两个字符 和 n 的字符串，不是换行符。
- 验证方法：
console.log(JSON.stringify(yourString))—— 如果看到"line1\nline2"，说明还没还原；如果看到"line1 line2"（换行显示在控制台），才是真换行 - 动态设置时，用
textContent，别用innerHTML：preEl.textContent = logStr才保留原始空白；innerHTML会把 - 从
<textarea></textarea>读值是安全的（它支持换行），但从<input type="text">读不到
pre 和 white-space: pre 有什么区别？
pre 是语义标签，自带默认样式（white-space: pre + font-family: monospace），适合代码、日志等需语义明确的场景；white-space: pre 是 CSS 行为，可加在任意元素上，更灵活但无语义。
- 用
div加style="white-space: pre; font-family: monospace;"效果等同pre，且兼容性更好（IE9+） - 若内容来自富文本编辑器或 SSR 模板，
pre可能被自动 trim 或转义，这时 CSS 方案反而更可控 -
white-space: pre-wrap允许长行自动换行，避免横向溢出，但会轻微改变原始对齐（比如缩进错位）
怎么嵌套 code 才不破坏格式？
pre 里嵌 code 是标准组合，语义清晰、格式稳定；但必须注意嵌套顺序和转义。
- 正确结构：
<pre class="brush:php;toolbar:false;"><code class="js">function foo() { return 42; }</code></pre> -
code必须作为pre的直接子元素，不能套div或p，否则可能破坏预格式化流 - HTML 特殊字符（如
、<code>>）必须手动转义，否则浏览器会尝试解析：<div>才显示为<div> <li>别依赖 <code>pre自动高亮——它不解析语法，只是“照搬”，高亮要靠外部库或class配合 CSS
最容易被忽略的点：等宽字体缺失会让缩进失效，尤其含 时；tab-size: 4 要显式设置，否则不同浏览器默认值可能不同；还有，Chrome Elements 面板里看到的换行 ≠ 渲染结果，最终得看 computed styles 里的 white-space 值和 innerText 内容。
