Playground de text-wrap en CSS

Guía educativa de text-wrap

Elegir cómo se reparte el texto entre líneas

Compara wrap, balance y pretty según el contenido. Aprende qué evita nowrap, para qué sirve stable al editar y por qué el ancho, la fuente y el navegador cambian el resultado.

Volver al playground

Modelo mental

El navegador elige saltos dentro de una caja que ya tiene su propio ancho.

Caja, oportunidades y elecciónEsquema conceptual de tres decisiones; las barras no son medidas ni un resultado de un algoritmo real.

1 · Ancho disponibleinline-size y la fuente determinan cuánto texto cabe en cada línea.
2 · Oportunidades de saltoEl idioma, los espacios y las reglas de separación permiten ciertos cortes.
3 · Elección de líneastext-wrap elige entre esos cortes; no inventa espacio ni cambia los caracteres.

text-wrap controla los saltos automáticos, no el ancho de la caja ni el tamaño de la fuente. wrap permite el ajuste normal; nowrap impide esos saltos. balance, pretty y stable orientan la elección entre oportunidades de salto existentes.

Es un shorthand de text-wrap-mode y text-wrap-style. text-wrap: balance equivale a wrap balance. Un shorthand que omite una parte la restablece a su valor inicial: wrap para mode y auto para style. Usa longhands si solo quieres cambiar una parte.

.title { text-wrap: balance; }.title { text-wrap-mode: wrap; text-wrap-style: balance; }

wrap y balance en títulos

Mismo contenido y ancho; cambia la estrategia de composición.

wrap prioriza el ajuste normal. balance busca líneas de longitudes parecidas en bloques cortos, como títulos o citas. No equivale a centrar con text-align ni garantiza que todas las líneas midan lo mismo.

Un título con ajuste normal y equilibrado

text-wrap: wrap

Diseña interfaces que sigan siendo claras cuando cambia el ancho

text-wrap: balance

Diseña interfaces que sigan siendo claras cuando cambia el ancho

Las dos cajas admiten hasta 22ch y comparten fuente y texto. balance puede dejar más espacio al final de las líneas sin reducir el ancho de la caja. Si el título cabe en una línea, la diferencia desaparece.

Un título con ajuste normal y equilibrado

HTML

<div class="wrap-guide-headings">
  <div>
    <p class="wrap-guide-label">text-wrap: wrap</p>
    <h5 class="wrap-guide-normal">Diseña interfaces que sigan siendo claras cuando cambia el ancho</h5>
  </div>
  <div>
    <p class="wrap-guide-label">text-wrap: balance</p>
    <h5 class="wrap-guide-balanced">Diseña interfaces que sigan siendo claras cuando cambia el ancho</h5>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.wrap-guide-headings {
  display: grid;
  gap: 2rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));

  .wrap-guide-label {
    margin: 0 0 0.75rem;
    font: 1rem/1.6 system-ui, sans-serif;
  }

  h5 {
    margin: 0;
    max-inline-size: 22ch;
    font: 800 1.75rem/1.3 system-ui, sans-serif;
    overflow-wrap: anywhere;
    text-wrap: wrap;
  }

  .wrap-guide-balanced {
    text-wrap: balance;
  }
}

El límite de balance depende del motor: MDN documenta hasta seis líneas en Chromium y diez en Firefox. No lo conviertas en un contrato de diseño; al superar el límite puede usarse el ajuste normal. Aplícalo a bloques cortos y revisa el ancho real, las traducciones y la fuente de fallback.

wrap y pretty en párrafos

Mejorar la composición no significa equilibrar todas las líneas.

pretty favorece calidad tipográfica sobre velocidad. Puede evitar una última línea demasiado corta y mejorar otros cortes. El algoritmo varía: Chromium se centra en el final del párrafo; WebKit puede considerar el párrafo completo. No promete eliminar toda palabra aislada.

Un párrafo con ajuste normal y pretty

text-wrap: wrap

Una interfaz necesita textos que puedan crecer con las traducciones y las preferencias de lectura. Elegir los saltos con cuidado mejora la composición, pero no sustituye una medida legible, una fuente adecuada ni espacio entre líneas. Comprueba siempre el resultado con contenido real.

text-wrap: pretty

Ambas muestras usan hasta 28ch para hacer visibles los cortes. La diferencia puede ser sutil o inexistente según texto, ancho y motor. Si pretty no se admite, la declaración se ignora y permanece wrap; la primera muestra es una referencia explícita.

Un párrafo con ajuste normal y pretty

HTML

<div class="wrap-guide-paragraphs">
  <div>
    <p class="wrap-guide-label">text-wrap: wrap</p>
    <p class="wrap-guide-normal">Una interfaz necesita textos que puedan crecer con las traducciones y las preferencias de lectura. Elegir los saltos con cuidado mejora la composición, pero no sustituye una medida legible, una fuente adecuada ni espacio entre líneas. Comprueba siempre el resultado con contenido real.</p>
  </div>
  <div>
    <p class="wrap-guide-label">text-wrap: pretty</p>
    <p class="wrap-guide-pretty">Una interfaz necesita textos que puedan crecer con las traducciones y las preferencias de lectura. Elegir los saltos con cuidado mejora la composición, pero no sustituye una medida legible, una fuente adecuada ni espacio entre líneas. Comprueba siempre el resultado con contenido real.</p>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.wrap-guide-paragraphs {
  display: grid;
  gap: 2rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));

  p {
    margin: 0;
    max-inline-size: 28ch;
    font: 1.125rem/1.7 system-ui, sans-serif;
    overflow-wrap: anywhere;
    text-wrap: wrap;
  }

  .wrap-guide-label {
    margin-block-end: 0.75rem;
    font-size: 1rem;
  }

  .wrap-guide-pretty {
    text-wrap: pretty;
  }
}

Usa balance para títulos cortos y pretty para prosa seleccionada. Evaluar varios cortes tiene un coste distinto del ajuste normal; evita imponer la misma estrategia a todo el documento sin medir. Ninguna sustituye line-height ni un ancho cómodo de lectura.

nowrap, saltos forzados y palabras largas

Impedir saltos automáticos puede producir desbordamiento.

nowrap conserva los saltos forzados, como br, pero evita los automáticos. No reduce texto ni añade puntos suspensivos. En esta comparación el scroll queda dentro de la muestra; para prosa y controles que deben crecer, suele ser mejor permitir wrap.

Una línea larga y un salto explícito

text-wrap: wrap

Un texto largo necesita espacio para conservar todas sus palabras.

text-wrap: nowrap

Un texto largo necesita espacio para conservar todas sus palabras.

text-wrap: nowrap + <br>

Primera línea explícita.
Segunda línea explícita.

La primera muestra envuelve. La segunda puede desplazarse horizontalmente; recibe foco para usar el teclado. La tercera conserva el br aunque tenga nowrap. No se oculta el texto ni se simula truncamiento.

Una línea larga y un salto explícito

HTML

<div class="wrap-guide-nowrap">
  <div>
    <p class="wrap-guide-label">text-wrap: wrap</p>
    <p class="wrap-guide-normal">Un texto largo necesita espacio para conservar todas sus palabras.</p>
  </div>
  <div>
    <p class="wrap-guide-label">text-wrap: nowrap</p>
    <p class="wrap-guide-single" tabindex="0" role="region" aria-label="text-wrap: nowrap">Un texto largo necesita espacio para conservar todas sus palabras.</p>
  </div>
  <div>
    <p class="wrap-guide-label">text-wrap: nowrap + &lt;br&gt;</p>
    <p class="wrap-guide-single" tabindex="0" role="region" aria-label="text-wrap: nowrap + &lt;br&gt;">Primera línea explícita.<br>Segunda línea explícita.</p>
  </div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.wrap-guide-nowrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));

  p {
    margin: 0;
    max-inline-size: 24ch;
    font: 1.125rem/1.7 system-ui, sans-serif;
    text-wrap: wrap;
  }

  .wrap-guide-label {
    margin-block-end: 0.75rem;
    font-size: 1rem;
    overflow-wrap: anywhere;
  }

  .wrap-guide-normal {
    overflow-wrap: anywhere;
  }

  .wrap-guide-single {
    text-wrap: nowrap;
    overflow: auto;

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 3px;
    }
  }
}

overflow-wrap resuelve otro problema: permite cortes de emergencia en cadenas que no caben, como URLs. white-space también controla espacios y saltos; una declaración posterior puede restablecer text-wrap-mode. Comprueba la cascada antes de atribuir el overflow a balance o pretty.

stable al editar contenido

Conservar líneas anteriores a la edición, sin bloquear el reflow.

stable está pensado para texto editable: al cambiar una línea, las anteriores no deberían recomponerse por esa edición. No congela el layout cuando cambia el ancho o la fuente, ni conserva el contenido. En una muestra estática puede parecer idéntico a wrap.

Editar un bloque con stable

Texto editable · text-wrap: stable

Modifica las últimas líneas y observa los saltos anteriores. Sin guardado.

Este bloque permite probar la composición mientras escribes. Mantén las primeras frases y añade algunas palabras al final para observar qué líneas conserva el navegador. El resultado depende del soporte y del algoritmo del motor.

Entra con Tab y modifica una de las últimas líneas. Observa las anteriores en tu motor. El contenido solo cambia en esta muestra: no se guarda, no modifica el playground y el código representa la receta inicial. Recarga para recuperar el texto.

Editar un bloque con stable

HTML

<div class="wrap-guide-editing">
  <p id="wrap-guide-editor-label">Texto editable · text-wrap: stable</p>
  <p id="wrap-guide-editor-hint">Modifica las últimas líneas y observa los saltos anteriores. Sin guardado.</p>
  <div class="wrap-guide-editor" contenteditable="true" role="textbox" aria-multiline="true" aria-labelledby="wrap-guide-editor-label" aria-describedby="wrap-guide-editor-hint">Este bloque permite probar la composición mientras escribes. Mantén las primeras frases y añade algunas palabras al final para observar qué líneas conserva el navegador. El resultado depende del soporte y del algoritmo del motor.</div>
</div>

CSS

:root {
  color-scheme: light dark;
}

.wrap-guide-editing {
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  font: 1rem/1.6 system-ui, sans-serif;

  p {
    margin: 0 0 0.75rem;
    text-wrap: wrap;
  }

  .wrap-guide-editor {
    box-sizing: border-box;
    max-inline-size: 38ch;
    min-block-size: 6lh;
    padding: 0.75rem;
    border: 1px solid currentColor;
    border-radius: 16px;
    corner-shape: squircle;
    font-size: 1.125rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-wrap: wrap;
    text-wrap: stable;

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 3px;
    }
  }
}

La receta mantiene wrap como base y añade stable. CSS.supports puede confirmar que el valor se reconoce, pero no certifica el comportamiento durante una edición. Un editor completo requiere decisiones adicionales; este campo solo prueba el ajuste nativo.

Errores frecuentes

Comprueba contenido, ancho, cascada y soporte del valor concreto.

balance no cambia el título

Resultado esperado: Ver otra distribución de líneas.
Causa: Cabe en una línea, supera el límite del motor o ya tiene cortes equilibrados.
Solución: Prueba un ancho con pocas líneas y contenido real; verifica el valor calculado.

La caja sigue siendo igual de ancha

Resultado esperado: Que el fondo se ajuste a las líneas equilibradas.
Causa: text-wrap cambia saltos, no inline-size ni el layout del contenedor.
Solución: Diseña el ancho de la caja por separado y evita depender de la longitud de la última línea.

pretty deja una última línea corta

Resultado esperado: Eliminar siempre una palabra aislada.
Causa: El valor puede no estar soportado o el algoritmo no encuentra una composición mejor.
Solución: Revisa soporte, fuente y medida; conserva un resultado legible con wrap.

nowrap provoca scroll de página

Resultado esperado: Mantener el contenido dentro del viewport.
Causa: Se impiden saltos automáticos sin dar espacio ni un tratamiento local al desbordamiento.
Solución: Permite wrap en contenido que debe crecer; reserva nowrap para casos limitados y accesibles.

stable parece no hacer nada

Resultado esperado: Ver un cambio al seleccionarlo en texto estático.
Causa: Su finalidad aparece durante la edición; no es otra variante de balance.
Solución: Prueba contenido editable y verifica el comportamiento en los navegadores de destino.

Soporte y compatibilidad

El shorthand y sus valores no tienen un único calendario de soporte.

La tarjeta general no garantiza todos los valores. balance y pretty tienen entradas propias en Web Platform DX. A fecha de consulta, MDN BCD registra pretty en Chrome 117 y Safari 26, y no en Firefox; stable aparece desde Chrome 130, Firefox 121 y Safari 17.5. Revisa las tablas actuales antes de publicar o fijar requisitos.

Parte de texto que envuelve y sigue siendo legible. Declara wrap antes de una mejora y evita que un nowrap heredado sea la base accidental. @supports (text-wrap: pretty) permite condicionar estilos asociados; solo detecta sintaxis, no la calidad de los cortes. Las muestras usan el motor real, sin polyfills.