<pre>

整形済みテキスト

書いたとおりの改行や空白を、そのまま表示する要素です。複数行のコードやアスキーアートの表示に使います。

サンプルコード

HTML

1<pre><code>.box {

2 display: flex;

3 gap: 16px;

4}</code></pre>

CSS

1pre {

2 padding: 12px 16px;

3 background: #1e1e1e;

4 color: #d4d4d4;

5 border-radius: 6px;

6 overflow-x: auto;

ブラウザでの表示

pre は "preformatted text"（整形済みテキスト）の略です。通常のHTMLでは連続する空白や改行は1つの空白にまとめられますが、pre の中では書いたとおりに表示されます。

コードを表示するときは、pre の中に code を入れて「整形済みのコード」であることを示すのが定番です。

長い行は自動で折り返されないため、overflow-x: auto を指定して横スクロールできるようにします。

横スクロールではなく折り返したい場合は pre-wrap を使います。

CSS

1pre {

2 white-space: pre-wrap;

3 word-break: break-all;