Propiedad CSS white-space

La propiedad CSS white-space controla dos cosas a la vez: cómo se colapsan o preservan las secuencias de espacios en blanco (espacios, tabulaciones y saltos de línea escritos en el código fuente HTML), y si el texto se ajusta cuando llega al borde de su contenedor.

Por defecto, los navegadores son agresivos con los espacios en blanco. Cualquier serie de espacios, tabulaciones o saltos de línea en el marcado se colapsa en un solo espacio, y el texto se ajusta según sea necesario para caber en su caja. Por eso este código:

<p>Hello       world</p>

se renderiza como Hello world con un solo espacio, independientemente de cuántos espacios hayas escrito. La propiedad white-space te permite cambiar ese comportamiento — por ejemplo, para conservar el formato del código fuente, preservar los saltos de línea de un poema, o evitar que una etiqueta se divida en dos líneas.

Cuándo usarla

nowrap — mantiene la etiqueta de un botón, una celda de tabla o un elemento de navegación en una sola línea.
pre / pre-wrap — muestra texto preformateado (código, arte ASCII, sangría) donde los espacios y saltos de línea que escribiste deben conservarse. Esto es lo que usa el elemento <pre> por defecto.
pre-line — preserva los saltos de línea escritos en el código fuente mientras colapsa los espacios adicionales — útil para direcciones o mensajes cortos de varias líneas almacenados como texto plano.

Si tu objetivo es dividir palabras largas no separables (como una URL) en lugar de controlar los espacios en blanco del código fuente, usa overflow-wrap o word-break en su lugar.

Cómo se comporta cada valor

La tabla siguiente resume cómo cada valor trata los saltos de línea, los espacios y tabulaciones, y el ajuste de texto.

Valor	Nuevas líneas	Espacios y tabulaciones	Ajuste de texto
`normal`	Colapsa	Colapsa	Ajusta
`nowrap`	Colapsa	Colapsa	Sin ajuste
`pre`	Preserva	Preserva	Sin ajuste
`pre-wrap`	Preserva	Preserva	Ajusta
`pre-line`	Preserva	Colapsa	Ajusta
`break-spaces`	Preserva	Preserva	Ajusta (también ajusta después de cada espacio)

Valor inicial	normal
Se aplica a	Elementos de nivel inline y celdas de tabla; también se aplica a ::first-letter y ::first-line.
Heredable	No.
Animatable	Sí. La propiedad white-space es animatable.
Versión	CSS1
Sintaxis DOM	object.style.whiteSpace = "nowrap";

Sintaxis

Sintaxis de la propiedad CSS white-space

white-space: normal | nowrap | pre | pre-line | pre-wrap | break-spaces | initial | inherit;

Ejemplo de la propiedad white-space con el valor "normal"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: normal;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Con normal, las series de espacios en blanco del código fuente se colapsan en espacios simples y el texto se ajusta a una nueva línea cuando alcanza el borde del <div>.

Ejemplo de la propiedad white-space con el valor "nowrap"

Con nowrap, el texto sigue colapsando los espacios en blanco pero nunca se ajusta. Se extiende más allá del lateral del contenedor en lugar de dividirse en una segunda línea, lo que normalmente provoca desbordamiento horizontal (a menudo combinado con text-overflow para agregar puntos suspensivos).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad white-space con el valor "pre-line"

Con pre-line, las secuencias de espacios siguen colapsándose en uno, pero cualquier salto de línea escrito en el código fuente HTML se preserva y el texto continúa ajustándose según sea necesario.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div>
      Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Pruébalo tú mismo »

En el siguiente ejemplo, puedes ver la diferencia entre los valores nowrap, normal y pre-wrap uno al lado del otro.

Ejemplo de la propiedad white-space con tres valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.t1 {
        white-space: nowrap;
      }
      p.t2 {
        white-space: normal;
      }
      p.t3 {
        white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <h3>white-space: nowrap;</h3>
    <p class="t1">
      Lorem Ipsum is dummy text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: normal;</h3>
    <p class="t2">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: pre-wrap;</h3>
    <p class="t3">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción	Ejemplo
normal	Divide las líneas según sea necesario para rellenar las cajas de línea. Este es el valor por defecto de esta propiedad.	Play it »
nowrap	Con este valor el texto nunca se ajustará a la siguiente línea.	Play it »
pre	Preserva tanto los espacios como los saltos de línea. El texto no se ajustará a la siguiente línea.	Play it »
pre-line	Las secuencias de espacios en blanco se colapsan en un único espacio. El texto se ajustará cuando sea necesario y en los saltos de línea.	Play it »
pre-wrap	El navegador preserva los espacios en blanco. El texto se ajustará cuando sea necesario y en los saltos de línea.	Play it »
break-spaces	El mismo comportamiento que "pre-wrap" excepto: cualquier secuencia de espacio en blanco preservado siempre ocupa espacio (incluso al final de una línea), existe una oportunidad de salto de línea después de cada carácter de espacio en blanco preservado, y esos espacios afectan el tamaño intrínseco de la caja en lugar de quedar colgados.	Play it »
initial	Hace que la propiedad use su valor por defecto.	Play it »
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

overflow-wrap y word-break — controlan dónde se dividen las cadenas largas no separables.
text-overflow — combínalo con white-space: nowrap para recortar texto con puntos suspensivos.
word-wrap — el alias heredado de overflow-wrap.
overflow — decide qué ocurre con el contenido que supera su contenedor cuando no se ajusta.

Práctica

¿Cuáles son algunas de las propiedades del valor 'white-space' en CSS?

Se aplica a cajas inline.Permite controlar los caracteres de espacio en blanco en el texto.No afecta a los espacios, líneas u otros tipos de espacio en blanco.Puede aceptar valores como 'normal', 'nowrap', 'pre', 'pre-wrap' y 'pre-line'.Afecta al color del texto en CSS.