Seguimos después de una pequeña parada con un capítulo más de Maestro CSS y para seguir por donde lo dejamos en el anterior capítulo, continuaremos hablando de propiedades de visualización, en concreto de white-space y z-index.

White-space
La propiedad white-space nos sirve para controlar los espacios en blanco de nuestro texto, ya sea entre palabras o entre líneas.

Como todos sabréis, en los navegadores se mostraría de la misma manera un texto que en nuestro HTML original escribiéramos igual pero con diferentes espacios entre palabras:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium rutrum nisi. Nunc egestas, velit id placerat interdum, metus ligula posuere nunc, quis sollicitudin est lectus nec arcu.</div>

<div>Lorem      ipsum         dolor        sit          amet,consectetur adipiscing elit.
Etiam pretium rutrum nisi.
Nunc egestas,          velit id          placerat interdum,       metus ligula posuere nunc,           quis sollicitudin       est lectus nec arcu.</div>

Estos dos textos interpretados por nuestro navegador se verían completamente igual a pesar de los saltos de línea y diferente espaciado entre palabras de nuestro segundo ejemplo, dado que 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 propiedad white-space nos permite desde la CSS modificar el comportamiento de estos espacios en blanco para que respeten la estructura visual que nosotros hemos decidido sin necesidad de usar tags propios de HTML como el <br /> para saltos de línea o el &nbsp; para espaciados entre palabras. Sus valores pueden ser:

• white-space:normal;
  El comportamiento por defecto para los espacios en blanco. Los espacios sobrantes y los saltos de línea se eliminan. El texto se adapta al elemento en el que está contenido de forma que crea los saltos de línea que necesite para no salirse del elemento contenedor.

  Poniendo como ejemplo el siguiente código HTML:
  <div>Lorem ipsum     dolor sit amec.
  Consectetur    adipiscing elit.</div>

  Quedaría:
  Lorem ipsum dolor sit amec. Consectetur adipiscing elit.
  

• white-space:pre;
  Los espacios en blanco sobrantes no se eliminan y sólo se muestran los saltos de línea incluidos en el texto original. Eso implica el texto toma el formato que hayamos decidido independientemente del contenedor que lo contenga (lo cual puede provocar que sobresalga de este).

  Según el ejemplo anterior quedaría:
  Lorem ipsum     dolor sit amec.
  Consectetur    adipiscing elit.
  

• white-space:nowrap;
  Se comporta igual que normal con los espacios en blanco (los eliminaría) pero si que respeta los saltos de línea, de forma que los contenidos se pueden salir de su elemento contenedor.

  Siguiendo el ejemplo:
  Lorem ipsum dolor sit amec.
  Consectetur adipiscing elit.
  

• white-space:pre-wrap;
  Se comporta igual que pre, pero en este caso el contenido si se adapta al contenedor que lo contiene realizando de forma automática los saltos de línea que sean necesarios para que los contenidos de texto nunca se salgan de su elemento contenedor.
• white-space:pre-line;
  Se eliminan los espacios en blanco sobrantes pero se respetan los saltos de línea originales y se añaden los que necesite para que el contenido de texto no se salga de su elemento contenedor.

Z-index
Esta propiedad sirve para especificar el orden de los elementos en el eje z, o sea, para especificar que elementos están por encima de otros, y solamente funciona cuando se ha definido en la misma capa la propiedad position con los valores absolute o relative.

Como si se tratará de Photoshop, podemos especificar que capa está por encima de otra en la visualización de la página. Sus valores pueden ser:

• z-index:auto;
  Toma el valor por defecto, la última capa especificada es la que queda por encima de las anteriores.
• z-index:1 9; (cualquier valor numérico)
  Las capas que tienen un valor mayor son las que se sitúan por encima de las que tengan un valor menor.

Con estas dos propiedades damos por finalizado el capítulo dedicado a las propiedades CSS de visualización. La próxima semana empezaremos con las propias de las capas (tamaños, márgenes, relleno, bordes, perfiles y fondos).