pre标签换行空格不生效，先检查内容是否为原始字符：JS用textContent注入、禁用模板转义、确保white-space未被CSS覆盖；中文对齐错位需指定等宽中文字体栈；横向溢出要配对overflow-x: auto与max-width。
pre标签里换行和空格不生效？先检查内容是不是真“原始”
浏览器对 pre 标签的格式保留能力是“无条件信任源文本”的——它只负责原样渲染你给它的字符，不负责修复缺失的换行符或空格。常见失效场景包括：
- 用 JavaScript 的
innerHTML动态写入字符串时，\n被当成普通文本而非换行符（尤其在模板字符串未正确换行时） - 服务端模板（如 EJS、Django）默认 HTML 转义，把
\n当成字面量输出，浏览器收不到真实换行控制符 - CSS 重置了
white-space，比如全局 reset.css 设了white-space: normal，直接覆盖了pre默认的pre
实操建议：必须用 textContent 注入纯文本；若需 JS 动态渲染，确保字符串含真实 \n 且未被转义；检查 computed style 中 white-space 是否仍为 pre 或 pre-wrap。
中文代码/日志在pre里对不齐？等宽字体没设对
pre 默认用 monospace，但这个关键字在中文系统下常被映射到非等宽字体（如 Windows 的“微软雅黑”），导致一个汉字 ≈ 两个 ASCII 字符宽，缩进和竖线立刻错位。
- 别单写
font-family: monospace——它只是兜底关键字，不是具体字体 - 显式声明中英文兼顾的等宽字体栈：
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Microsoft YaHei Mono', monospace - 统一缩进方式：避免混用 Tab 和空格；若用 Tab，加
tab-size: 4控制宽度
注意：'Microsoft YaHei Mono' 需系统已安装，否则会跳过；Mac 用户优先靠前放 SFMono-Regular。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
pre内容横向溢出、滚动条不出现？overflow没配对
pre 默认 white-space: pre，禁止换行，且不自动限制宽度——它会按字符数无限伸展，撑破父容器。这不是 bug，是语义使然。
- 必须给
pre加overflow-x: auto，且不能被父级overflow: hidden截断 - 父容器要设
max-width: 100%或明确宽度，否则pre无边界可依 - 慎用
word-break: break-all：它会强行切断英文单词和 URL，破坏可读性；优先用overflow-wrap: break-word或保持pre-wrap
典型安全组合：pre { white-space: pre-wrap; overflow-x: auto; max-width: 100%; }。
想展示带、&的HTML代码？别直接往pre里贴
pre 不做任何 HTML 解析过滤，它只渲染你给的字符。如果直接把 <div> 贴进去，浏览器会尝试解析这个标签，轻则吞掉内容，重则破坏整个页面结构。
<ul>
<li>手动转义：把 <code> 换成 <code><，> 换成 >，& 换成 &
<pre><code></code></pre> 嵌套结构，再配合 Prism.js 或 highlight.js —— 它们在运行时自动处理转义与高亮pre 里嵌套 <p>、<div> 等块级标签，HTML5 规范禁止，虽部分浏览器容错，但语义错误且易触发解析异常关键点在于：格式保留和 HTML 安全是两件事，pre 只管前者，后者得靠转义或 code 语义兜底。
