<pre>：预格式化文本元素

基线 广泛可用

此功能已得到很好的建立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用： 2015 年 7 月.

<pre> HTML 元素表示预格式化文本，该文本将完全按照 HTML 文件中的编写方式呈现。文本通常使用非比例或等宽字体呈现。此元素内的空白将按原样显示。

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

试一试

如果您需要在<pre>标签中显示保留字符，例如<、>、&和"，则必须使用其相应的字符引用进行转义。

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

属性

此元素仅包含全局属性。

width

包含一行首选字符数。虽然在技术上仍然实现，但此属性没有视觉效果；要实现此效果，请改用 CSS width。

wrap

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

无障碍访问

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

视力障碍者和使用屏幕阅读器等辅助技术的浏览者在按顺序读取预格式化文本字符时可能无法理解它们所代表的内容。

结合使用<figure>和<figcaption>元素，并补充pre元素上的ARIArole和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>

结果

转义保留字符

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 角色 通用
允许的 ARIA 角色 任意
DOM 接口 HTMLPreElement

规范

规范
HTML 标准
# the-pre-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅