Propiedad white-space

Ejemplos de uso

El tratamiento de los espacios en blanco en el código HTML es una de las características más desconcertantes para los diseñadores web que comienzan a crear páginas. A continuación se muestra cómo visualizan los navegadores dos párrafos de ejemplo:

Aunque los dos párrafos anteriores se visualizan de la misma forma, en realidad su código HTML es completamente diferente:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donec mollis nunc in leo.</p>

<p>Lorem ipsum    dolor    sit amet,   consectetuer adipiscing     elit.
Sed non sem   quis tellus vulputate       lobortis. Vivamus fermentum, tortor
id ornare    ultrices, ligula ipsum tincidunt       pede, et blandit
sem pede suscipit     pede. Nulla cursus    porta sem. Donec mollis nunc in leo.</p>

El segundo párrafo contiene numerosos espacios en blanco y saltos de línea. Sin embargo, como los navegadores eliminan automáticamente todos los espacios en blanco sobrantes, los dos párrafos se ven exactamente igual.

En el estándar HTML un "espacio en blanco" puede ser un salto de línea, un tabulador y un espacio en blanco normal. Los navegadores eliminan de forma automática todos los espacios en blanco sobrantes salvo el espacio en blanco que separa las palabras del texto.

La única excepción de este comportamiento es la etiqueta <pre> de HTML, utilizada para mostrar texto que ya tiene formato (su nombre viene de preformateado) y que por tanto respeta todos los espacios en blanco y todos los saltos de línea:

Lorem ipsum    dolor    sit amet,   consectetuer adipiscing     elit.
Sed non sem   quis tellus vulputate       lobortis. Vivamus fermentum, tortor
id ornare    ultrices, ligula ipsum tincidunt       pede, et blandit
sem pede suscipit     pede. Nulla cursus    porta sem. Donec mollis nunc in leo.

El código HTML del ejemplo anterior es:

<pre>Lorem ipsum    dolor    sit amet,   consectetuer adipiscing     elit.
Sed non sem   quis tellus vulputate       lobortis. Vivamus fermentum, tortor
id ornare    ultrices, ligula ipsum tincidunt       pede, et blandit
sem pede suscipit     pede. Nulla cursus    porta sem. Donec mollis nunc in leo.</pre>

La propiedad white-space permite variar el comportamiento de los espacios en blanco. El estándar CSS 2.1 define cinco modelos diferentes de tratamiento de 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.
• 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.
• 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.
• 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.
• 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.

Como las explicaciones incluídas en el estándar CSS 2.1 pueden llegar a ser confusas, la siguiente tabla resume el comportamiento de cada valor:

A continuación se muestra el efecto de cada modelo de tratamiento de espacios en blanco sobre un mismo párrafo que contiene espacios en blanco y saltos de línea y que se encuentra dentro de un elemento contenedor de anchura limitada:

Los valores más utilizados son normal, pre y pre-wrap. El valor normal se puede emplear por ejemplo en un elemento <pre> que se quiere mostrar como si fuera un párrafo:

<pre>Lorem ipsum    dolor    sit amet,   consectetuer adipiscing     elit.
Sed non sem   quis tellus vulputate       lobortis. Vivamus fermentum, tortor
id ornare    ultrices, ligula ipsum tincidunt       pede, et blandit
sem pede suscipit     pede. Nulla cursus    porta sem. Donec mollis nunc in leo.</pre>

<pre style="white-space: normal">Lorem ipsum    dolor    sit amet,   consectetuer adipiscing     elit.
Sed non sem   quis tellus vulputate       lobortis. Vivamus fermentum, tortor
id ornare    ultrices, ligula ipsum tincidunt       pede, et blandit
sem pede suscipit     pede. Nulla cursus    porta sem. Donec mollis nunc in leo.</pre>

De la misma forma, el valor pre se puede emplear en un párrafo de texto que se quiere mostrar como si fuera un elemento <pre>:

Por último, el valor pre-wrap es muy útil cuando se quiere mostrar un texto de la forma más fiel posible a su formato original (respetando espacios en blanco y saltos de línea) pero sin que el contenido de texto se salga de su elemento contenedor.