HTML pre 标签：保留空格、换行与处理长行

HTML 参考手册

创建时间 2026-10-30 最后修改 2026-10-30

HTML <pre> 标记一个保留空格和换行的预格式化文本区域。将其与 <code> 结合用于源代码，并在长行应换行以适应可用宽度时使用 CSS white-space: pre-wrap。

pre 与普通段落的区别

普通段落会根据默认的 CSS 合并源中的连续空格和换行。pre 标签默认保持这些空格，因此适用于带缩进的代码、日志以及需要一致间距的文本。默认字体通常是等宽字体，但字体和空格处理可以通过 CSS 修改。

你可以使用空格对齐类似表格的视觉效果，但这并不能提供表格的实际行列关系。对于比较数据，请使用 table；当通过空格传达 ASCII 艺术等内容的含义时，应提供屏幕阅读器也能理解的说明。

完整示例：保留空格并处理长行

将以下文档保存为 pre-demo.html 并在浏览器中打开。文件请保存为 UTF-8 编码，不需要任何外部库。水平滚动和自动换行已分别应用于同一个长字符串。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>比较 pre 的空格与换行</title>
  <style>
    body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
    pre { padding: 1rem; background: #eef2f4; }
    .scroll { overflow-x: auto; }
    .wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>空格与换行</h1>
  <p>one    two
    three</p>
  <pre>one    two
    three</pre>
  <h2>横向滚动</h2>
  <pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>自动换行</h2>
  <pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>显示 HTML 源代码</h2>
  <pre class="scroll"><code>&lt;p&gt;Hello &amp; welcome&lt;/p&gt;</code></pre>
</body>
</html>

第一段根据默认的空格处理合并为一行，随后 pre 标签保留了单词 one 和 two 之间的四个空格，以及单词 three 前的四个空格。当屏幕宽度变窄时，滚动示例会出现水平滚动，而换行示例甚至会将较长的单词拆到下一行。在 HTML 源代码显示区域中，<p>Hello & welcome</p> 以标签形式显示为文本。

pre 内的 HTML 也会被解释。

pre 不是一个阻止 HTML 解释的元素。如果你在其中写一个实际的 <strong> 标签，该标签的含义会被应用。要将 HTML 源代码作为文本显示，请将 < 转义为 <，将 & 转义为 &。上面整个文档的最后一个示例使用了这个原则。

pre 起始标签之后的第一行换行会被 HTML 解析器移除。随后代码中的换行和缩进会被保留，因此请检查文本的实际起始位置，以确保文档对齐的空格不会显示在屏幕上。在动态显示代码时，可以使用 textContent 而不是 innerHTML 插入字符串，以防止其被解释为标签。

自动换行未发生时检查的事项

如果你只指定overflow-wrap并保持默认的white-space: pre，可能无法出现所需的换行。为了在屏幕边缘换行时保留空格和换行符，请应用pre-wrap；为了拆分没有空格的长字符串，还需指定overflow-wrap。相反，如果需要保持代码的单行结构，请保持pre并使用overflow-x: auto提供内部滚动。

pre 保留文本布局，而 code 表示内容是代码。将两者一起使用并不会自动生成语法高亮，需要使用高亮器或单独的 CSS。不要依赖旧的 width 和 wrap 属性，可以用 CSS 调整显示。有关详细条件，请参阅 HTML 标准中的 pre 元素中的 pre 定义，以及 MDN 的 pre 元素参考。

HTML 参考手册