html - sirve - Mostrar el elemento como texto preformateado a través de CSS

title html css

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo cambiar un tramo para que parezca un pre con CSS? 7 respuestas

¿Hay alguna manera de emular la visualización de un elemento pre 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

Sí:

div.preformatted {
    white-space: pre;
    }

Referencia:

• developer.mozilla.org/en/CSS/white-space .

Answer 2

Utilice white-space: pre para preservar el preformateado de espacio en blanco como en el elemento pre . Para ir un paso más allá, también agregue font-family: monospace , ya que los pre elementos generalmente se configuran en una fuente monospace 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 3

para obtener <pre> puedes usar;

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

Answer 4

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

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