[解決済み] CSSで要素を整形済みテキストとして表示する [重複]。

質問

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

例えば、このdivの空白をCSSのルールでそのままにすることはできますか？

<div class="preformatted">

  Please procure the following items:

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

どのように解決するのですか？

使用方法 white-space: pre のように空白のプリフォーマットを保持するために 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>