CSS avanzado: la propiedad “white-space”

Una propiedad poco utilizada, que permite al diseñador manejar los espacios en blanco y los saltos de línea de los textos incluidos en el código HTML.

Esta también 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.

Se emplea para determinar la forma en que el navegador tomará los espacios en blanco y 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 HTML se 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.

En el ejemplo siguiente, veremos un párrafo en el que se han colocado deliberadamente una gran cantidad de espacios en blanco entre las palabras y saltos de línea, y veremos como el navegador coloca tantos saltos de línea como sea necesario para que el texto no se salga de los 600 pixeles que tiene cada párrafo de ancho. Junto al párrafo nombrado, hemos colocado otro con los espacios en blanco simples, para que se pueda comprobar que, a pesar de ser diferentes, el navegador los muestra de la misma forma:

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lorem tellus, tempor vel     ultrices a, volutpat ac justo. Aenean a orci ac justo gravida porta. Vivamus varius dui velit. Donec nec nunc ipsum, vitae pretium magna. Praesent non urna leo, non accumsan felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

  <p>Lorem       ipsum            dolor    sit   amet,     consectetur    adipiscing   elit. 
Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.       
Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna. 
Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per        inceptos himenaeos. </p>

p  {
 width: 600px;
 margin: 10px auto;
 padding: 5px;
 border: solid 2px #f60;
 font: normal 13px arial, helvetica, sans-serif;
 }

Los valores de la propiedad

A esta propiedad se le pueden asignar cinco valores propios, además del valor “inherit” (heredado), que son:

• normal: Por ser el valor inicial de la propiedad, se aplica a todos los elementos en los que no se determina la propiedad. Los espacios en blanco son simplificados, 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. Podemos ver el ejemplo anterior para ver como se comporta, mientras que en el ejemplo que sigue, veremos su comportamiento en el primer párrafo.
• pre: Cuando se aplica este valor, el navegador respeta todos los espacios en blanco que encuentre. 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. En el ejemplo siguiente, veremos su aplicación en el segundo párrafo.
• nowrap: El tratamiento de los espacios en blanco es igual que cuando se aplica el modo normal, es decir, que se eliminan todos los espacios en blanco sobrantes. La diferencia con el modo normal es que no se aplican los saltos de línea a menos que se encuentren incluidos en el texto origianal, por lo que el contenido puede desbordar los límites del elemento. En el ejemplo que se da a continuación, vemos su aplicación en el tercer párrafo.
• 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 colocará los saltos de línea necesarios para que el contenido no desborde el tamaño del elemento en el que se aplica. También son respetados los saltos de línea originales. En el ejemplo que sigue, se aplica en el cuarto párrafo.
• Pre-line: Cuando se aplica este valor, se deja un solo espacio en blanco, eliminándose el resto, mientras que se respetan los saltos de línea originales y se ajusta el texto, agregando los saltos de línea necesarios. En el quinto párrafo del ejemplo siguiente, vemos como es su aplicación.

  <p id="normal">Lorem       ipsum            dolor    sit   amet,     consectetur    adipiscing   elit. 
Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.       
Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna. 
Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per        inceptos himenaeos. </p>

  <p id="pre">Lorem       ipsum            dolor    sit   amet,     consectetur    adipiscing   elit. 
Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.       
Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna. 
Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per        inceptos himenaeos. </p>

  <p id="nowrap">Lorem       ipsum            dolor    sit   amet,     consectetur    adipiscing   elit. 
Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.       
Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna. 
Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per        inceptos himenaeos.  </p>

  <p id="prewrap">Lorem       ipsum            dolor    sit   amet,     consectetur    adipiscing   elit. 
Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.       
Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna. 
Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per        inceptos himenaeos.  </p>

  <p id="preline">Lorem       ipsum            dolor    sit   amet,     consectetur    adipiscing   elit. 
Donec     lorem   tellus,  tempor vel     ultrices     a,  volutpat ac justo.       
Aenean a orci ac justo gravida     porta. Vivamus varius      dui velit. Donec nec nunc ipsum, vitae pretium magna. 
Praesent non urna leo, non accumsan felis. Class       aptent taciti sociosqu ad litora torquent per conubia nostra, per        inceptos himenaeos.  </p>

p  {
 width: 600px;
 margin: 10px auto;
 padding: 5px;
 border: solid 2px #f60;
 font: normal 13px arial, helvetica, sans-serif;
 }
 
p#normal  {
  white-space: normal;
  }
  
p#pre  {
  white-space: pre;
  }
  
p#nowrap  {
  white-space: nowrap;
  }
  
p#prewrap  {
  white-space: pre-wrap;
  }
  
p#preline  {
  white-space: pre-line;
  }