Afficher l'élément sous forme de texte préformaté via CSS

Question

Est-il possible d'émuler l'affichage d'un élément pre via CSS?

Par exemple, puis-je conserver l'intégralité des espaces 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 la mise en forme des espaces, comme dans l’élément pre. Pour aller plus loin, ajoutez également font-family: monospace, comme pre, les éléments sont généralement définis dans une police monospace par défaut (par exemple, pour une utilisation avec des 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 "pré-enveloppement" est mieux. Cela peut aider avec une longue longueur en ligne.

Answer 3

Oui:

div.preformatted {
    white-space: pre;
    }

Référence:

• white-space .

Answer 4

afin d'obtenir <pre> vous pouvez utiliser;

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