<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;
}

如果你需要在 <pre> 標籤內顯示保留字元，如 <、>、& 和 "，這些字元必須使用相應的 HTML 實體進行轉義。

屬性

此元素僅包括全域屬性。

cols

包含應有的行數的首選字元數。這是 width 的非標準同義詞。要實現此效果，請改用 CSS width。

width

包含應有的行數的首選字元數。儘管在技術上仍有實現，但此屬性無視視覺效果；要實現此效果，請改用 CSS width。

wrap

是一個指示溢出應發生的提示。在現代瀏覽器中，此提示會被忽略且不會有視覺效果；要實現此效果，請改用 CSS white-space。

可及性考量

對於使用預格式化文本創建的任何圖片或圖表，提供替代描述是重要的。替代描述應清晰簡明地描述圖片或圖表的內容。

使用輔助技術（如屏幕閱讀器）瀏覽的視覺受損人士可能無法理解預格式化文本字符在順序讀出時代表什麼。

<figure> 和 <figcaption> 元素的組合，再加上 pre 元素上的 ARIA role 和 aria-label 屬性，允許預格式化的 ASCII 藝術被宣告為帶有替代文本的圖片，figcaption 則作為圖片的標題。

範例

<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>

• MDN 了解 WCAG，指南 1.1 解釋
• H86: 為 ASCII 藝術、表情符號和 13375p34k 提供文本替代 | W3C WCAG 2.0 技術

範例

基本範例

HTML

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

結果

轉義保留字元

HTML

<pre>
let i = 5;

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

結果

技術摘要

規範

瀏覽器相容性

參見

• CSS：white-space、word-break
• HTML 實體
• 相關元素：<code>