white-space

white-space es la propiedad CSS que define cómo trata el navegador los espacios en blanco y los saltos de línea del contenido textual. Por defecto, el navegador colapsa múltiples espacios consecutivos en uno solo y permite que el texto se corte en varias líneas cuando llega al borde del contenedor (comportamiento normal). Con white-space podés cambiar ese comportamiento: preservar todos los espacios como en el HTML fuente, impedir que el texto rompa línea, o combinar ambos efectos.

Esta propiedad controla dos dimensiones independientes del manejo de texto: primero, qué pasa con los espacios en blanco múltiples (¿se colapsan a uno solo o se preservan todos?); y segundo, qué pasa con los saltos de línea (¿el texto puede wrappear automáticamente cuando no entra, o se fuerza en una sola línea?). Los cinco valores principales del estándar representan distintas combinaciones de estas dos dimensiones. Entender esa matriz es la forma más rápida de dominar la propiedad.

white-space se hereda. Si lo declarás en un contenedor, todos los hijos heredan ese comportamiento. Esto es especialmente relevante con nowrap: si un <div> tiene white-space: nowrap, los <p> y <span> internos también ignoran los saltos de línea, lo que puede desbordar el layout de formas inesperadas. Con pre, los bloques de código heredan la preservación de espacios de su ancestro, que suele ser el comportamiento deseado.

Cómo funciona

El navegador procesa el texto del nodo antes de renderizarlo. Con normal, el motor colapsa secuencias de espacios y tabulaciones a un único espacio, y los saltos de línea en el HTML también se colapsan. Con pre, el motor preserva la representación original del texto incluyendo múltiples espacios, tabulaciones y saltos de línea explícitos.

p    { white-space: normal; }   /* default: colapsa espacios, hace wrap */
code { white-space: pre; }      /* preserva todo tal como está en el HTML */
.una-linea { white-space: nowrap; } /* una sola línea, puede desbordar */

pre:    los espacios    y los
saltos de línea
se preservan tal como están.

Sintaxis

selector {
  white-space: normal | nowrap | pre | pre-wrap | pre-line;
}

Valores

normal — comportamiento por defecto

Colapsa espacios múltiples y tabulaciones a un único espacio. Los saltos de línea del HTML también se colapsan. El texto se ajusta automáticamente al ancho del contenedor (wrapping automático).

p { white-space: normal; } /* comportamiento por defecto del navegador */

Cuándo usar: texto de cuerpo corriente, párrafos, cualquier contenido donde el reflow automático es el comportamiento esperado.

nowrap — sin saltos de línea

Colapsa espacios múltiples igual que normal, pero impide que el texto rompa línea. El texto se extiende en una sola línea aunque desborde el contenedor. Para ver ese desborde oculto con ..., se necesita la tríada del truncado (ver text-overflow).

.badge    { white-space: nowrap; }  /* etiqueta que no debe romper */
.una-celda { white-space: nowrap; } /* celda de tabla que no debe crecer en altura */

Cuándo usar: etiquetas y badges cortos, títulos de tarjeta que deben ocupar una sola línea, cualquier elemento donde el texto desbordante es preferible a un wrap inesperado. Siempre combinalo con overflow: hidden si no querés que el texto se salga del contenedor.

pre — preserva todo, sin wrap

Preserva todos los espacios y saltos de línea del HTML tal como están. No hace wrap automático: si el texto es más ancho que el contenedor, desborda. Se comporta como el elemento HTML <pre>.

pre, code { white-space: pre; }

Cuándo usar: bloques de código, preformatos, texto donde los espacios y saltos de línea son parte del contenido (como poesía o ASCII art embebidos en CSS). El elemento <pre> aplica este valor por defecto.

pre-wrap — preserva espacios, pero hace wrap

Preserva los espacios y saltos de línea del HTML (como pre), pero sí hace wrap automático cuando el texto llega al borde del contenedor. Es el valor ideal para bloques de código donde querés mostrar el contenido sin scrollbar horizontal.

.codigo-largo { white-space: pre-wrap; }

Cuándo usar: bloques de código en pantallas pequeñas, áreas de texto (<textarea>), contenido preformateado que debe ser legible en cualquier ancho de pantalla. Combina lo mejor de normal (wrap) y pre (preservación de espacios).

pre-line — preserva saltos de línea, colapsa espacios

Los saltos de línea del HTML se preservan, pero los espacios múltiples se colapsan igual que normal. Y sí hace wrap automático.

.con-saltos { white-space: pre-line; }

Cuándo usar: cuando el contenido tiene saltos de línea intencionados guardados en la base de datos (como notas o mensajes de usuario) y querés respetarlos sin entrar en el modo pre completo.

Cuándo usar qué

Notas, gotchas e interacción

• nowrap y el desborde horizontal. Con white-space: nowrap, el texto no rompe línea y puede salirse del contenedor. Si no querés ese desborde visible, combiná con overflow: hidden. Para la tríada del truncado, también necesitás text-overflow: ellipsis.
• pre y las tabulaciones. El elemento <pre> aplica white-space: pre por defecto, lo que preserva tabulaciones. Si en tu HTML hay cuatro espacios de indentación antes del código, con white-space: pre esos espacios se renderizan. Esto puede causar bloques de código con indentación extra si el HTML tiene sangría por formateo.
• Herencia y componentes. Un contenedor con white-space: nowrap hace que todos sus hijos también ignoren los saltos de línea. En layouts con muchos elementos anidados, es fácil que se herede sin querer. Verificá el DOM si el texto de un elemento interno no está wrapping.
• pre-wrap en <textarea>. Los navegadores aplican white-space: pre-wrap a los <textarea> por defecto, lo que es lo correcto para campos de texto multilínea. Si sobreescribís eso con normal, el área de texto deja de respetar las líneas del usuario.
• Interacción con overflow. white-space: nowrap combinado con overflow: visible (el default) hace que el texto desborde visualmente el contenedor. overflow: hidden lo recorta. overflow: auto o scroll genera scrollbar. Para el patrón de truncado, siempre overflow: hidden (ver overflow).

Vigente / legacy

white-space existe desde CSS1. Los valores pre-wrap y pre-line se agregaron en CSS2.1 y están disponibles en todos los navegadores modernos. No hay forma legacy.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección Texto largo: la tríada ellipsis.