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

作者：技术拾光

时间：2026-06-04

在网页中如果想要原封不动地展示一段代码、一段日志，或者任何需要保留原始格式的文本，pre 标签几乎是唯一“开箱即用”的 HTML 原生方案。它天生就能保留空格、制表符和换行，不需要借助 JavaScript 或复杂 CSS 即可生效。不过，事情往往没看起来那么简单。直接使用 pre 标签，一不小心

文章目录

在网页中如果想要原封不动地展示一段代码、一段日志，或者任何需要保留原始格式的文本，pre 标签几乎是唯一“开箱即用”的 HTML 原生方案。它天生就能保留空格、制表符和换行，不需要借助 JavaScript 或复杂 CSS 即可生效。

不过，事情往往没看起来那么简单。直接使用 pre 标签，一不小心就会踩坑。关键点在于两件事：一是内容的转义处理，二是样式的补救措施。

为什么 `pre` 里的代码或 HTML 片段会乱掉

这里有个常见的误解：很多人以为把内容放进 pre 标签，浏览器就会把它当作纯文本对待。其实不然。浏览器在解析 HTML 时，会一视同仁地处理 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 标签真正的挑战，不在于怎么写这个标签本身，而在于如何确保它里面的内容既“能被正确阅读”，又“不会被浏览器错误解析”。一个转义字符的遗漏，就足以让整段代码消失，甚至破坏整个页面的布局。细节，永远是成败的关键。