CSSを介してフォーマット済みのテキストとして要素を表示する

Question

CSSを介してpre要素の表示をエミュレートする方法はありますか？

たとえば、CSSルールを使用して、このdivの空白をそのまま保持できますか？

<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>

Answer 1

pre要素と同様に、white-space: preを使用して空白の事前フォーマットを保持します。さらに先に進むには、font-family: monospaceも追加します。通常、pre要素はデフォルトで等幅フォントに設定されます（コードブロックで使用する場合など）。

.preformatted {
    font-family: monospace;
    white-space: pre;
}

<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>

Answer 2

.preformatted {
   white-space: pre-wrap;
}

「プリラップ」の方が良いと思います。これは、長さが長い場合に役立ちます。

Answer 3

はい：

div.preformatted {
    white-space: pre;
    }

参照：

• white-space 。

Answer 4

使用できる<pre>を取得するため。

div.preformatted{ white-space: pre ; display: block; }