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 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.