Propiedad white-space
Esta es una de las propiedades CSS que son poco utilizadas por los diseñadores, sobre todo aquellos que recién comienzan, debido fundamentalmente al desconocimiento acerca de sus posibles aplicaciones. Esta propiedad se encuentra soportada por todos los navegadores, por lo que su aplicación es factible en todos los casos.
La propiedad
white-spacepermite determinar el tratamiento que el navegador aplicará en los espacios en blanco y en los saltos de línea.
Para comprender mejor esto, debemos entender como los navegadores interpretan la presencia de los espacios en blanco y los saltos de línea, cuando la propiedad “white-space” no se encuentra especificada o cuando se encuentra en normal, que es su valor inicial.
A diferencia de lo que sucede con los diferentes editores de texto, cuando dentro de un código HTMLse encuentra un texto en el cual alguna o varias de las palabras se encuentran separadas por más de un espacio en blanco consecutivos, el navegador simplifica y deja solo uno de los espacios en blanco, haciendo caso omiso de la presencia de los demás.
En lo que respecta a los saltos de línea, los navegadores emplean (al igual que en los editores de texto) todos los saltos de línea necesarios para que el texto no salga de los límites impuestos, pero no respeta los saltos de línea propios del texto.
Esta propiedad puede ser aplicada a todo elemento, incluyendo campos de formularios.
La propiedad white-space se corresponde con la definición siguiente:
| white-space | tratamiento de los espacios en blanco |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Descripción | Permite establecer el espacio entre las palabras que forman el texto |
| Valor inicial | normal |
| se aplica a | todos los elementos |
| Válida en | visual |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/text.html#propdef-white-space |
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:
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.
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.
Aunque los dos párrafos anteriores se visualizan de la misma forma, en realidad su código HTML es completamente diferente:
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>Los valores de la propiedad
Para que la propiedad white-space pueda cumplir su cometido de variar el comportamiento de los espacios en blanco, se le pueden asignar cinco valores propios, además del valor “inherit” (heredado) que son con el siguiente significado las descritas a continuación:
-
normal:por ser el comportamiento por defecto de HTML, se aplica a todos los elementos en los que no se determina la propiedad. Los espacios en blanco sobrantes y los saltos de línea se eliminan, dejándose uno solo entre cada palabra, y se aplican todos los saltos de línea necesarios (además de los que sean determinados por la etiqueta <br> o <br />) para que el texto se mantenga dentro de los límites impuestos por el tamaño del selector. Sin embargo, los saltos de línea naturales del texto no son respetados. En definitiva, el texto se muestra en tantas líneas como sea necesario para que sus contenidos no se salgan del elemento contenedor . -
pre:Cuando se aplica este valor, el navegador no elimina los espacios en blanco que encuentre y sólo se muestran los saltos de línea incluidos en el texto original (exactamente igual que la etiqueta <pre>). Los saltos de línea que los navegadores colocan en forma automática en otros casos, cuando se aplica este valor no se colocan, por lo que el contenido puede desbordar los límites del elemento. Los saltos del línea del texto original son respetados. Este comportamiento puede provocar que los contenidos de texto se salgan de su elemento contenedor. -
nowrap:se comporta igual que el modonormalen el tratamiento de los espacios en blanco sobrantes, pero, la diferencia con respecto al modo normal, es que no añade saltos de línea en el texto original. a menos que se encuentren incluidos en el texto original, por lo que los contenidos se pueden salir de su elemento contenedor. -
pre-wrap:la aplicación de este valor de la propiedad hace que el navegador deje todos los espacios en blanco del contenido. A diferencia del valor “pre”, en este caso el navegador introduce los saltos de línea que sean necesarios para que los contenidos de texto nunca se desborden de su elemento contenedor. También son respetados los saltos de línea originales. -
pre-line:cuando se aplica este valor, se deja un solo espacio en blanco, eliminándose los espacios en blanco sobrantes, pero, se respetan los saltos de línea originales a la vez que se ajusta el texto, generando tantos saltos de línea como sean necesarios para que el contenido de texto no se salga de su elemento contenedor.
En la siguiente tabla se resumen las características anteriores para cada valor.
| Valor | Respeta espacios en blanco | Respeta saltos de línea | Ajuste espacios en blanco |
|---|---|---|---|
| normal | no | no | si |
| pre | si | si | no |
| nowrap | no | no | no |
| pre-wrap | si | si | si |
| pre-line | no | si | si |
Pulsa para ver una página de ejemplo
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:
[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.
[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.
[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.
[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.
[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.
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>:
<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 style="white-space: 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.</p>
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.
Esta propiedad aunque funciona en todos los navegadores, en algunas versiones antiguas de algunos navegadores no se obtienen los mismos resultados, por lo que hay que tener cuidado al aplicarla.
Fuentes. Se hace uso de la siguiente bibliografía: https://aprende-web.net/css/css2_2.php https://www.lawebera.es/xhtml-css/css-avanzado-propiedad-%e2%80%9cwhite-space%e2%80%9d.php https://uniwebsidad.com/propiedad-white-space
