<pre> 标签默认保留空格与换行，但受 white-space: normal 等 CSS 影响易失效；应显式设 white-space: pre-wrap，嵌套 <code> 保障语义与可访问性，内容需转义，配合 overflow-x: auto 和 max-width: 100% 适配响应式。
pre 标签默认保留空格和换行，但受 CSS 影响容易失效
<pre> 的核心作用是原样渲染文本中的空格、制表符和换行符，这是它和 <p> 或 <div> 最根本的区别。但它不是“绝对保险”——一旦父容器或自身被设置了 white-space: normal（比如某些重置样式表或框架默认规则），格式就会丢失。
常见错误现象：<pre> 里写了多行缩进文本，页面上却挤成一行；或者中间多个空格只显示一个。
- 检查浏览器开发者工具中
<pre>元素的 computedwhite-space值，必须是pre、pre-wrap或pre-line - 显式加一句
white-space: pre-wrap;是最稳妥的做法，既保留原始换行与空格，又允许内容自动折行（避免横向溢出） - 不要对
<pre>设置text-align: justify或word-break: break-all，这些会干扰格式保留逻辑
pre 里嵌套 code 标签是语义最佳实践
纯文本用 <pre> 足够，但展示代码片段时，应该把实际代码包裹在 <code> 里：<pre><code>console.log("hello");</code></pre>。这样既保持格式，又明确传达“这是可执行代码”，对无障碍访问（如屏幕阅读器）和 SEO 都有帮助。
使用场景：文档中的命令行输出、JSON 示例、HTML 片段、函数签名等需要逐字呈现的内容。
立即学习“前端免费学习笔记（深入）”；
-
<code>自身不保留换行，必须放在<pre>内才有效 - 多数语法高亮库（如 Prism.js、highlight.js）也依赖这个嵌套结构来定位和处理代码块
- 如果只用
<code>不套<pre>，缩进和空行会全部丢失
pre 在响应式布局中容易撑破容器，需主动限制宽度和滚动
<pre> 默认是块级元素，但它的内容不会自动折行——超长行会直接撑开父容器，导致水平滚动条出现在整个页面，而不是仅在代码块内。
性能 / 兼容性影响：移动端尤其明显，用户必须左右拖动才能看全内容，体验极差。
- 推荐组合样式：
overflow-x: auto;+max-width: 100%;+white-space: pre-wrap; - 避免用
word-wrap: break-word;处理代码——它可能在单词中间断开，破坏语义（比如把userEmail拆成userEma…） - 如果内容全是短行，用
pre-wrap就够了；若有不可折行的长字符串（如 base64、URL），才启用overflow-x: auto
pre 中的 HTML 实体和特殊字符必须手动转义
<pre> 不会自动转义内容，里面的 <、>、& 仍会被浏览器当作 HTML 标签或实体解析，导致渲染异常甚至 XSS 风险。
常见错误现象：写 <pre><div>test</div></pre>，结果只显示 “test”，<div> 和 </div> 被当成真实标签解析并丢弃。
- 服务端渲染时，确保内容已做 HTML 实体转义（如
<→，<code>>→>） - 前端动态插入时，别用
innerHTML直接写入未处理的字符串，改用textContent或先转义 - 注意：JS 字符串中的
\n在 innerHTML 中不会自动变成换行，要配合<pre>才生效
console.log("Hello\nWorld"); // 这个 \n 在 <pre> 里才会显示为换行
真正麻烦的是混合场景：既要保留缩进和换行，又要安全渲染用户输入的 HTML 片段，还得适配小屏。这时候不能只靠 <pre>，得搭配转义、CSS 控制和必要时的 JS 处理。 
