CSS: Trabajando con espacios en blanco

Cuando trabajamos con espacios en blanco sobre html lo normal es que nuestro navegador los elimine, interpretando sólamente aquellos que aparecen entre palabras. Para mí eso es perfecto, pero habrá quien añore el preformato tipo procesador de texto, para vosotros aquí tenéis una solución con css.

La propiedad white-space te permite manejar los espacios en blanco a tu antojo ¿Cómo? Simple, con un mismo ejemplo os demuestro su funcionamiento, el código que voy a usar es el mismo, cambiaré solo la propiedad en css.

<p>Lorem ipsum dolor sit        amet, consectetur adipiscing elit.
Aenean sit amet   mauris et sapien sollicitudin semper sit     amet quis erat. Quisque feugiat lorem ut ipsum
varius a faucibus sapien aliquam.</p>

white-space: normal
Es el valor por defecto, NO muestra los espacios en blanco añadidos ni los saltos de línea, aunque crea saltos de línea automáticamente para que el texto no se salga de su contenedor.

normal

Flickr: Normal

white-space: pre
Este valor SI muestra los espacios en blanco y los saltos de línea. Lo malo, que si no añadimos saltos de línea el texto continuará en la misma línea, llegando a salirse del contenedor.

prewrap

Flickr: Pre Wrap

white-space: pre-wrap
Aquí SI nos muestra los espacios en blanco y los saltos de línea, y SI ajustas las líneas automáticamente para que no se salga el texto del contenedor.

pre

Flickr: Pre

Puede no parecer algo muy importante, pero es una propiedad no muy habitual, por lo que o no se aprovecha o se desconoce directamente. Siempre es bueno conocer todos nuestros recursos :)

  • 27 octubre 2009
  • css
  • ,

4 comments on “CSS: Trabajando con espacios en blanco”

  1. Hey! otra cosa que no sabia! hay que ver, si aprendo y todo leyendo tu blog…

    Por cierto, los dos ultimos ejemplos los tienes intercambiados no? miratelo que creo que está mal ;)

  2. Pingback: Bitacoras.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *