<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 表格僅在瀏覽器中載入

另請參閱