pre 默认不折行，需用 white-space: pre-wrap 和 overflow-wrap: break-word 组合实现换行；高亮依赖 code 标签及 class；缩进问题须从源码或正则处理；IE8 不支持 pre-wrap，建议放弃兼容。
pre 标签默认不折行，超长代码会水平溢出容器——这不是 bug，是 white-space: pre 的标准行为。要让它自动换行，必须用 CSS 显式干预，且不能只靠一个属性。
为什么 pre 里的 URL 或 Base64 字符串会撑开页面
因为 pre 默认只认换行符 \n，对连续无空格的长字符串（如 https://example.com/very/long/path?with=many¶ms=true）完全不折行。浏览器把它当做一个“不可断开的单词”，哪怕容器只有 200px 宽，它也硬要横向铺开。
-
white-space: pre-wrap是核心：保留原有换行和空格，同时允许按容器宽度折行 -
word-break: break-all或word-wrap: break-word（已废弃，推荐用overflow-wrap: break-word）负责切开长单词 - 仅设
white-space: pre-wrap不够——遇到长 URL 还是会溢出；仅设overflow-wrap不够——原有缩进和换行会丢失
pre + code 嵌套时样式失效的常见原因
很多人写成 <pre><code class="js">...，但只给 pre 加了背景色或字体，结果语法高亮不生效。高亮库（如 Prism.js、highlight.js）依赖的是 code 元素上的 class，不是 pre。
- 确保
code标签存在且带正确语言标识，例如class="python"（注意不是class="python"，不同库要求不同） - CSS 选择器要覆盖到
pre code，比如：pre code { font-family: 'Fira Code', monospace; }，而不是只写pre { ... } - 如果用了
textContent动态插入内容，code标签本身不会被高亮库识别——得等它完成 DOM 插入后再调用Prism.highlightElement()或类似方法
后端吐出的代码缩进混乱，复制粘贴多出空格怎么办
HTML 源码里 pre 标签本身的缩进会被渲染为实际空白，导致代码块开头出现几列多余空格。这不是 JS 或 CSS 能直接修复的，得从内容生成源头处理。
立即学习“前端免费学习笔记（深入）”；
- 别把
pre标签缩进写：错误示例 ——<div><pre> function foo() { ... } - 让
pre标签顶格写，内容从下一行开始，且首行不留空格 - 服务端或 JS 渲染前，用正则统一去除每行公共前缀空格：
text.replace(/^(\s+)(?=\S)/gm, '')，或更稳妥地用String.prototype.trimStart()配合行分割 - 避免在 HTML 源码里用
trimStart()处理，且影响可访问性
IE8 及更老浏览器兼容性要点
现在绝大多数项目已不需支持 IE8，但如果真要兼容，white-space: pre-wrap 在 IE8 是无效的，必须降级处理。
- IE8 只认
white-space: pre和white-space: normal，不支持pre-wrap - 可用条件注释或 CSS hack 加 fallback：
pre { white-space: pre; *white-space: normal; }（*只对 IE7 及以下生效，IE8 需另配） - 更现实的做法：加
overflow: auto并接受滚动条，比强行兼容更稳定 - 现代项目建议直接放弃 IE8 支持，专注用
white-space: pre-wrap; overflow-wrap: break-word;即可
真正麻烦的不是加哪几行 CSS，而是得判断清楚：你到底想保留什么（换行？空格？缩进？）、牺牲什么（语义？兼容性？复制体验？），再选组合策略。没一刀切的解法，尤其当 pre 里混着 JSON、HTML 片段、命令行输出时，转义、折行、高亮三者容易互相踩脚。
