Afficher un élément en tant que texte préformaté via CSS

Question

Existe-t-il un moyen d'émuler l'affichage d'un pre via CSS ?

Par exemple, puis-je conserver les espaces blancs intacts dans cette div en utilisant une règle CSS ?

<div class="preformatted">

  Please procure the following items:

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

Answer 1

Utilisation white-space: pre pour préserver le préformatage des espaces blancs, comme dans l'option pre élément. Pour aller plus loin, ajoutez également font-family: monospace , comme pre sont généralement définis par défaut dans une police monospaciale (par exemple, pour les blocs de code).

.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;
}

Je pense que le terme "pré-enroulement" est plus approprié. Il peut être utile en cas de longueur importante de la file d'attente.

Answer 3

Oui :

div.preformatted {
    white-space: pre;
    }

Référence :

• white-space .

Answer 4

Afin d'obtenir <pre> que vous pouvez utiliser ;

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