网页文本预格式化：Pre标签保留空格与换行

怎么解决？核心在于转义。

• 手动转义：最基础的方法，是把内容中的特殊字符替换成 HTML 实体。比如，把 < 替换成 <，把 > 替换成 >，把 & 替换成 &。
• 使用 textContent：如果你是通过 JavaScript 动态插入代码，那么使用 el.textContent = codeString 是更安全的选择。这个方法会自动处理转义，将字符串作为纯文本插入，避免了使用 innerHTML 可能带来的解析风险。
• 利用服务端渲染：如果代码片段是在服务端（比如用 Django、Flask 等框架）生成的，通常模板引擎都提供了自动转义功能（例如 Django 的 {{ code|escape }}）。这样输出到前端时，内容已经是安全的了。

pre 默认不换行，长代码横向溢出怎么办

另一个让人头疼的问题是换行。pre 标签的默认 CSS 属性是 white-space: pre，这意味着它会严格保留源码中的换行，但不会自动在容器边界处折行。一旦遇到一行很长的代码，用户就只能拖着水平滚动条来回看，体验非常糟糕。

好在 CSS 提供了现成的解决方案：

• 允许自动换行：给 pre 加上 white-space: pre-wrap 样式。这个值非常聪明，它既保留了源码中所有的空白符（空格、缩进、空行），又允许文本在必要时自动换行。
• 处理超长单词：对于像 Base64 字符串、长 URL 这种中间没有空格的超长字符，可以再加上 word-break: break-word 或 overflow-wrap: break-word，强制其在任意字符间断开。
• 保留滚动条作为后备：为了以防万一，可以设置 overflow-x: auto。这样即使在某些复杂情况下自动换行失效，至少还能提供一个横向滚动条，确保内容不会被截断。

用 pre 显示代码时，为什么缩进看起来不对

你有没有遇到过这种情况：明明在编辑器里对齐得好好的代码，放到 pre 标签里显示，缩进就对不齐了？这很可能是因为制表符（\t）在作祟。

根据 HTML 规范，pre 元素中的制表符宽度被假定为 8 个字符。然而，现代代码编辑器（如 VSCode、Sublime Text）的默认设置通常是 2 个或 4 个空格作为一个制表位。这个差异直接导致了视觉上的错乱。

要解决缩进问题，可以试试这几个方法：

• 最稳妥的方案：用空格：在生成最终 HTML 之前，将代码中的所有制表符替换为对应数量的空格。这是保证在任何环境下显示都一致的最可靠方法，尤其适用于静态网站。
• CSS 控制制表符宽度：如果必须保留制表符，可以使用 CSS 属性 tab-size: 4; 来指定一个制表符等于多少个空格的宽度。主流浏览器（Chrome, Firefox, Edge）和 Safari 15+ 都支持这个属性。
• 注意浏览器兼容性：需要警惕的是，tab-size 属性在较旧的浏览器（特别是某些 Safari 版本）中可能不被支持。因此，如果你的项目对旧版浏览器有要求，最好不要完全依赖它来实现关键的对齐效果。

说到底，使用 pre 标签真正的挑战，不在于怎么写这个标签本身，而在于如何确保它里面的内容既“能被正确阅读”，又“不会被浏览器错误解析”。一个转义字符的遗漏，就足以让整段代码消失，甚至破坏整个页面的布局。细节，永远是成败的关键。