<pre>

尝试一下

<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
</pre>

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

属性

这个元素只具有全局属性。

cols 非标准 已弃用

定义每行的最大字符数。这是一个非标准的属性，作用与width相同。要实现这样的效果，应该使用 CSS。

width 已弃用

包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用 CSS。

wrap 非标准

提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用 CSS。

示例

HTML

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

结果

无障碍

It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.

People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.

A combination of the <figure> and <figcaption> elements, supplemented by a combination of an id and the ARIA role and aria-labelledby attributes allow the preformatted text to be announced as an image, with the figcaption serving as the image's alternate description.

示例

<figure role="img" aria-labelledby="cow-caption">
  <pre>
  ___________________________
< I'm an expert in my field. >
  ---------------------------
         \   ^__^
          \  (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>

• MDN Understanding WCAG, Guideline 1.1 explanations
• H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0

规范

浏览器兼容性

参见

• CSS: white-space, word-break