Elemento de visualización como texto preformateado a través de CSS

Question

¿Hay alguna manera de emular la visualización de un elemento pre a través de CSS?

Por ejemplo, ¿puedo mantener el espacio en blanco intacto en este div usando una regla CSS?

<div class="preformatted"> 

    Please procure the following items: 

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

Answer 1

Uso white-space: pre para preservar preformateado espacio en blanco como en el elemento de pre. Para ir un paso más allá, también agregue font-family: monospace, ya que los elementos pre generalmente se configuran en una fuente monoespacial por defecto (por ejemplo, para usar con bloques de código).

.preformatted { 
 
    font-family: monospace; 
 
    white-space: pre; 
 
}

<div class="preformatted"> 
 

 
    Please procure the following items: 
 

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

Answer 2

Sí:

div.preformatted { 
    white-space: pre; 
    } 

Referencia:

• white-space.

Answer 3

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

creo "pre-wrap" es mejor. Puede ayudar con una larga duración en línea.

Answer 4

para obtener <pre> puede usar;

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