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
    .

Ahora, su real uso. Según veo, da igual si lo declaras o no para todos los

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{.verejemplo}

Bueno, con white-space: nowrap; se soluciona, ya que si el contenido dentro de 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.