CSSを使用して書式設定されたテキストを表示する

Question

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

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

<div class="preformatted"> 

    Please procure the following items: 

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

Answer 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>

Answer 2

はい：

div.preformatted { 
    white-space: pre; 
    } 

参考：

• white-space。

Answer 3

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

私は、 "事前ラップ" は優れていると思います。それは長い行の助けとなることができます。

Answer 4

inorderを取得するには<pre>を使用してください。

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