PRE标签在表格单元格中缩进失效是因为表格默认white-space: normal覆盖了其空白符保留行为；解决需强制设置white-space: pre及monospace字体，同时注意响应式下长行撑宽问题需配合pre-wrap与overflow-x:auto。
PRE标签在表格单元格里为什么缩进失效？
直接把 <pre> 塞进 <td> 里，代码缩进常被浏览器自动抹掉——不是你写错了，是表格默认的 white-space: normal 覆盖了 <pre> 的空白符保留行为。
解决办法很简单：给 <pre> 加内联样式强制保留空白，或者统一给表格单元格设样式。
- 推荐做法：在
<pre>上加style="white-space: pre; font-family: monospace;" - 更省事的做法：给整个表格加
td { white-space: pre; font-family: monospace; }，但要注意这会影响所有单元格文本（比如普通文字也会换行） - 别用
white-space: pre-wrap除非你需要自动换行——它会让长代码折行，破坏结构可读性
怎样让PRE内容不撑破表格列宽？
默认情况下，<pre> 里的长行会强行拉宽表格列，尤其在响应式页面里很危险。
核心思路是允许内部文本换行，但又不破坏缩进和语义——用 white-space: pre-wrap 配合 overflow-x: auto 是平衡点。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 给
<pre>加style="white-space: pre-wrap; overflow-x: auto; max-width: 100%; word-break: break-all;" -
word-break: break-all对超长无空格字符串（如 base64、长路径）有效，但会切开单词；如果不想切单词，换成overflow-wrap: break-word - 务必加
max-width: 100%，否则overflow-x: auto在 flex 或某些布局下可能不生效
用CODE嵌套PRE是否必要？
不需要。HTML5 中 <pre> 本身已语义化表示“预格式化文本”，再套一层 <code> 属于冗余，除非你要明确标记这是计算机代码（用于无障碍或 SEO）。
但真要加，顺序必须是 <pre><code>...</code></pre>，反过来（<code><pre>）不符合规范，部分屏幕阅读器可能忽略格式。
- 纯展示用途：只用
<pre>即可 - 需语义强化（比如文档生成、语法高亮插件识别）：用
<pre><code class="js"> - 避免写成
<code><pre>—— 浏览器虽能渲染，但 W3C 验证失败，且 Prism.js 等高亮库可能无法正确抓取节点
表格里用PRE显示JSON或缩进代码时常见错觉
很多人以为缩进对齐了就“格式正确”，其实 HTML 里多个连续空格会被合并，哪怕用了 <pre>，如果原始内容是从 JS 字符串拼接或 API 返回的，可能混入了全角空格、不可见控制符（如 \u200b），导致缩进看起来乱。
- 检查方式：把内容粘贴到编辑器里，打开“显示所有字符”（如 VS Code 的
Ctrl+Shift+P→ “Toggle Render Whitespace”） - 后端返回 JSON 时，优先用
JSON.stringify(obj, null, 2)生成带缩进的字符串，而不是靠空格硬拼 - 前端动态插入时，用
textContent赋值而非innerHTML，避免 HTML 实体（如
