La propiedad white-space

Una buena propiedad poco utilizada.

• white-space: valor
• Valores permitidos: normal | pre | nowrap | pre-wrap | pre-line
• Definición: La propiedad white-space establece el tratamiento de los espacios en blanco.

normal: los espacios en blanco sobrantes y los saltos de línea se eliminan. No obstante, el texto se muestra en tantas líneas como sea necesario para que sus contenidos no se salgan del elemento contenedor.

Ejemplo:

[white-space: normal] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.

Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: normal;">
<strong>[white-space: normal]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
</div>

pre: no se eliminan los espacios en blanco sobrantes y sólo se muestran los saltos de línea incluidos en el texto original. Este comportamiento puede provocar que los contenidos de texto se salgan de su elemento contenedor.

Ejemplo:

[white-space: pre] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.

Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: pre;">
<strong>[white-space: pre]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
</div>

nowrap: se comporta igual que normal en los espacios en blanco, pero no añade saltos de línea en el texto original, por lo que los contenidos se pueden salir de su elemento contenedor.

Ejemplo:

[white-space: nowrap] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: nowrap;">
<strong>[white-space: nowrap]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</div>

pre-wrap: se comporta igual que pre, pero se introducen los saltos de línea que sean necesarios para que los contenidos de texto nunca se salgan de su elemento contenedor.

Ejemplo:

[white-space: pre-wrap] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.


Acá mas.

Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: pre-wrap;">
<strong>[white-space: pre-wrap]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.


Acá mas.



</div>

Pre-line: se eliminan los espacios en blanco sobrantes, pero se respetan los saltos de línea originales y se crean tantos saltos de línea como sean necesarios para que el contenido de texto no se salga de su elemento contenedor.

Ejemplo:

[white-space: pre-line] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.

Código utilizado en el ejemplo:

<div style="width: 400px; border: 2px solid #ddd; padding: 10px; margin: 0pt;white-space: pre-line;">
<strong>[white-space: pre-line]</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum dictum. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
</div>

Fuente: