pre标签换行空格不显示的根本原因是HTML默认压缩空白符，且动态注入或转义会破坏原始格式；需用textContent注入、显式设置white-space、避免模板转义，并统一缩进方式。
pre 标签内容换行和空格不显示？
根本原因是 HTML 默认会把连续空白符（空格、制表符、换行）压缩成一个空格，pre 标签虽有“保留格式”语义，但前提是内容得是纯文本——一旦你用 JavaScript 动态写入、或模板引擎渲染时被转义/截断，就失效了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保内容直接写在
<pre>标签内，不要靠innerHTML = 'xxx'拼接字符串（容易丢失换行符 \n） - 如果必须用 JS 注入，用
textContent而非innerHTML，避免 HTML 解析干扰空白处理 - 检查是否被 CSS 重置：某些 reset.css 会设
white-space: normal，得显式加回white-space: pre或更宽松的pre-wrap
pre 里中文对齐错乱、缩进塌陷？
因为等宽字体（monospace）对中文支持不一，浏览器默认用系统字体回退，中英文字符宽度不一致，导致 tab 和空格视觉错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制指定等宽中文字体：比如
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;，Mac 上优先用 SFMono，Windows 加入 'Microsoft YaHei Mono'（需本地有） - 避免混用 tab 和空格：统一用 2 或 4 个空格缩进，tab 在不同编辑器下宽度可能被解释为 4 或 8，
pre不做转换 - 如需高亮代码，别硬塞
pre+ 手动<span>，改用prism.js或highlight.js，它们自动处理 whitespace 和语言 token
pre 标签内容过长导致横向滚动失效？
常见现象是内容撑破容器、文字折行混乱，或滚动条没出现。这不是 pre 的问题，而是父容器和 pre 自身的 overflow 控制没配对。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
pre必须设overflow-x: auto，且不能有white-space: normal覆盖 - 父容器（比如
<div>）需限制宽度，否则pre会无限伸展；加max-width: 100%更安全 - 慎用
word-break: break-all：它会让长单词（如 URL、base64）强行截断，破坏可读性；优先用overflow-wrap: break-word
服务端渲染时 pre 内容被转义成 或 <br>？
这是模板引擎（如 EJS、Nunjucks、Django）默认 HTML 转义惹的祸。<pre>hello\nworld</pre> 里的 \n 被当成普通文本，浏览器收不到真实换行符。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- EJS 用
<%- rawContent %>（带短横）代替<%= rawContent %>，跳过转义 - Nunjucks 用
{{ rawContent | safe }} - Django 用
{{ rawContent|safe }}，但确保内容可信，否则有 XSS 风险 - 更稳妥的做法：服务端把换行符替换成
\n字面量，前端用textContent注入，彻底绕过 HTML 解析阶段
真正难的不是加个 pre 标签，而是从内容生成、传输、注入到渲染，每个环节都可能悄悄吃掉换行或空格。尤其在 SSR + hydration 混合场景下，前后端对空白的处理稍有不一致，格式就没了。
