<pre> 默认保留换行和空格，但受父元素CSS（如white-space: normal）覆盖而失效；需显式设white-space: pre，代码缩进应避免HTML源码空格干扰，内容须HTML转义防XSS，<pre><code>中样式应作用于<code>而非仅<pre>。
pre 标签内容换行被浏览器忽略？检查 whitespace 处理方式
HTML 中 <pre> 默认保留换行和空格，但一旦套在某些容器里、或加了 CSS（比如 white-space: normal），换行就立刻失效。这不是 bug，是 CSS 层级覆盖了 <pre> 的默认行为。
常见错误现象：<pre>line1\nline2</pre> 渲染成一行；或者后端吐出带换行的字符串，前端塞进 <pre> 却没效果。
- 确认父元素没设
white-space: nowrap或normal - 显式重置：给
<pre>加style="white-space: pre;"（最稳妥） - 若需兼容旧版 IE，避免用
pre-wrap以外的值——IE8 只认pre和normal
代码缩进在 pre 里显示异常？别直接用空格缩进 HTML 源码
很多人把代码块写成这样：
<pre>
function foo() {
return true;
}
</pre>
结果浏览器渲染时，开头那几行缩进被当成“源码里的空格”，和实际代码逻辑缩进混在一起，视觉混乱、复制粘贴还多出多余空格。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 把
<pre>标签本身顶到行首，内容从下一行开始写 - 用
\u00a0替代普通空格做对齐（仅限极简场景） - 更可靠的做法：后端或 JS 渲染前 strip 掉每行开头的公共缩进（比如用
String.prototype.trimStart()配合正则）
pre 里显示 JSON/HTML 等特殊字符乱码？必须转义再插入
<pre> 不自动转义内容，直接插 {"name": "<script>alert(1)</script>"} 会执行脚本，插 <div>test</div> 会被解析为真实 DOM 节点——换行还在，但结构早崩了。
- 服务端输出前做 HTML 实体转义：
<→，<code>>→>，&→& - 前端 JS 插入时，别用
innerHTML，改用textContent（自动转义）或手动替换 - 若用模板引擎（如 Handlebars），确认是否启用了
{{ }}自动转义，避免误用{{{ }}}（三括号不转义）
pre + code 组合使用时 class 丢失？别只给 pre 加样式
语义上 <pre><code class="js">.../pre> 才规范，但很多人只给 <pre> 设了 font-family 或 background，结果 <code> 里的语法高亮样式（比如 Prism.js）根本不起作用——因为高亮库通常依赖 <code> 上的 class 去匹配语言类型。
- 确保
<code>标签存在且带正确 language 类，例如class="python" - 检查 CSS 选择器是否写成了
pre { ... }，而漏掉了pre code { ... }的继承规则 - 如果用 highlight.js，它会自动在
<code>上加hljs类，但前提是没手动删掉<code>标签
缩进和换行问题从来不是孤立的——它们总在转义、CSS 层叠、标签嵌套这几个地方悄悄打架。少一个 <code>，少一次转义，少一行 CSS 重置，都可能让 pre 显示变成“看起来差不多，但就是不对”。
