1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <pre>

<pre>：预格式文本元素

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

<pre> HTML 元素表示预格式文本，它将完全按照 HTML 文件中的书写方式呈现。文本通常使用非等宽字体或等宽字体渲染。

此元素中的空白字符将按原样显示，但有一个例外。如果在开头的 <pre> 标签后面紧跟着一个或多个换行符，则会删除第一个换行符。

<pre> 元素的文本内容被解析为 HTML，因此如果你想确保文本内容保持为纯文本，某些语法字符，例如 <，可能需要使用其各自的字符引用进行转义。有关更多信息，请参阅转义模糊字符。

<pre> 元素通常包含 <code>、<samp> 和 <kbd> 元素，分别表示计算机代码、计算机输出和用户输入。

默认情况下，<pre> 是一个块级元素，即其默认的 display 值为 block。

试一试

<pre>
             S
             A
            LUT
             M
            O N
            D  E
            DONT
          JE SUIS
          LA  LAN
          G U E  É
         L O Q U E N
        TE      QUESA
       B  O  U  C  H  E
      O        P A R I S
     T I R E   ET   TIRERA
    T O U             JOURS
   AUX                  A  L
 LEM                      ANDS   - Apollinaire
</pre>

pre {
  font-size: 0.7rem;
  margin: 0;
}

属性

此元素仅包含全局属性。

width

包含行应具有的首选字符数。尽管在技术上仍然实现，但此属性没有视觉效果；要实现这种效果，请改用 CSS width。

wrap

这是一个提示，指示溢出应如何发生。在现代浏览器中，此提示被忽略，其存在不会产生视觉效果；要实现这种效果，请改用 CSS white-space。

无障碍

为使用预格式文本创建的任何图像或图表提供替代描述非常重要。替代描述应清晰简洁地描述图像或图表的内容。

视力低下并借助屏幕阅读器等辅助技术浏览的人，当预格式文本字符按顺序读出时，可能无法理解它们所代表的含义。

<figure> 和 <figcaption> 元素的组合，辅以 pre 元素上的 ARIA role 和 aria-label 属性，允许预格式的 ASCII 艺术被宣布为带有替代文本的图像，并且 figcaption 用作图像的标题。

示例

html
<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using
    preformatted text characters.
  </figcaption>
</figure>

示例

基本示例

HTML

html
<p>Using CSS to change the font color is easy.</p>
<pre><code>
body {
  color: red;
}
</code></pre>

结果

转义模糊字符

假设你想在 <pre> 元素中演示 HTML 代码。定义有效 HTML 标签的字符序列（以 < 开头，以 > 结尾）将不会显示。要将标签字符显示为文本，你需要使用其字符引用转义（至少）< 字符，这样序列就不再定义有效的标签。

实际上，HTML 解析器将大多数字符视为纯文本，除非在特定上下文中。例如，< code 是可以的，但 <code 会被错误解析；&am; 是可以的，但 &amp; 则不行。然而，最好转义所有模糊字符以避免任何混淆，特别是如果你是程序化生成 HTML 并注入 <pre> 内容。在这种情况下，这里有一个关于如何转义字符的经验法则：

  1. 首先，按照你希望它在 HTML 文档中显示的方式写出内容。
  2. 将所有和号 (&) 替换为 &amp;。首先执行此步骤，这样在下一步中生成的新 & 字符就不会被转义。
  3. 将所有 < 字符替换为 &lt;。

这将使内容按你预期的方式显示。替换其他 HTML 语法字符是可选的（例如 > 替换为 &gt;，" 替换为 &quot;，' 替换为 &apos;），但不会造成任何损害。

HTML

html
<pre><code>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;Single Digit Number&quot;
</code></pre>

结果

技术摘要

内容类别 流内容，可感知内容。
允许内容 短语内容.
标签省略 无，起始标签和结束标签都必须存在。
允许父级 任何接受流内容的元素。
隐式 ARIA 角色 generic
允许的 ARIA 角色 任意
DOM 接口 HTMLPreElement

规范

规范
HTML
# pre-元素

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题