El espacio blanco

10/abr/2008 8

La propiedad CSS para white-space no es muy conocida ni muy utilizada, pero sí tiene una importante utilidad al momento de diagramar textos. Son esos detalles finos que marcan la diferencia entre un escritor de código web, y un power master pro en estilos.

White-space define cómo se comportan los espacios en blanco dentro de un elemento, o sea, en un párrafo son los espacios entre 2 palabras. Sus valores son:

  • normal: por defecto, el espacio en blanco es ignorado por el browser.
  • pre: el espacio en blanco es preservado por el navegador.
  • nowrap: el texto no se quiebra, continúa en la misma línea hasta que no haya un quiebre mediante la etiqueta <br />.

Ahora, su real uso. Según veo, da igual si lo declaras o no para todos los <p> por ejemplo. Pero sí me da un real uso cuando trabajo con links. Si tengo uno o varios links de 2 o más palabras, y justo uno te ellos me pilla en el margen del contenedor y se le ocurre quebrarme en 2 el enlace… se ve bastante feo y dificulta la lectura de ese link:

Ver ejemplo

Bueno, con white-space: nowrap; se soluciona, ya que si el contenido dentro de <a></a> no cabe en la línea, no me lo corta en 2 (como ocurre con Miguel Benigno del ejemplo anterior… pobrecito), sino que entero baja al siguiente renglón.

Pequeños detalles que marcan la diferencia.

Comentarios

  1. coto [#]

    además el ejemplo te permite formar el nombre Benigno Guillermo!!!

  2. sergiomas [#]

    Lo que me recuerda el verdadero uso del código &nbsp; que se renderiza como un espacio inquebrantable entre dos palabras.

  3. Eduardo [#]

    Gracias por compartirlo, no conocía ese estilo, yo lo solucionaba con y pues la verdad me será de utilidad.

    Saludos y nuevo gracias.

  4. Felipe Soto [#]

    excelente blog, y lo mejor de todo que es .cl 😀

    mis cordiales salu2.

  5. Mejorando visualmente tus links con CSS [#]

    […] Fuente: CSSlab.cl […]

  6. PixelCSS : Propiedad white-space [#]

    […] Lo hemos visto en CSSLab […]

  7. fearlex [#]

    Otro detalle interesantisimo, muy bueno la verdad

  8. woofer [#]

    Muy buen tip, realmente me han gustado varios de tus post que son muy utiles para el trabajo diario. 😀

Deja tu Comentario

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

CSSLab