☰

CSS を介して要素をフォーマット済みテキストとして表示する [重複] 質問する

tag-icon • tag-icon html css whitespace pre
CSS を介して要素をフォーマット済みテキストとして表示する [重複] 質問する

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

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

<div class="preformatted">

  Please procure the following items:

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

ベストアンサー1

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>

おすすめ記事