| Definición | Establece el tratamiento de los espacios en blanco |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | normal |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/text.html#propdef-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:
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 quenormalen 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 quepre, 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:
| Valor | Respeta espacios en blanco | Respeta saltos de línea | Ajusta las líneas |
|---|---|---|---|
normal | no | no | si |
pre | si | si | no |
nowrap | no | no | no |
pre-wrap | si | si | si |
pre-line | no | si | si |
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:
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.