Propiedad CSS word-break

La propiedad CSS word-break controla cómo se dividen las palabras cuando el texto llega al borde de su contenedor. Determina si el navegador tiene permitido partir una palabra entre caracteres para evitar que el contenido largo e irrompible desborde.

De forma predeterminada, los saltos de línea solo ocurren en las "oportunidades de ajuste flexible" — espacios, guiones y puntos de ruptura similares. Una cadena larga sin espacios (una URL, un hash, un identificador largo) no se romperá en absoluto y desbordará su caja. Establecer word-break: break-all le indica al navegador que puede romper la línea en cualquier carácter, de modo que el texto se ajuste en lugar de desbordarse.

Esto es especialmente útil para:

URLs largas, rutas de archivos o direcciones de correo electrónico dentro de columnas estrechas.
Contenido generado por el usuario donde no se puede predecir la longitud de las palabras.
Texto mixto CJK (chino / japonés / coreano) y Latino, donde el comportamiento de ruptura difiere entre scripts.

word-break está estrechamente relacionado con overflow-wrap (antes word-wrap) y white-space. La diferencia clave: overflow-wrap: anywhere solo rompe una palabra cuando de otro modo desbordaría, mientras que word-break: break-all rompe de forma agresiva en cada línea, incluso cuando había un punto de ruptura normal disponible. Usa overflow-wrap primero para los casos ordinarios de "no dejes que esta URL desborde", y utiliza word-break cuando específicamente quieras ajuste a nivel de carácter.

Esta propiedad es una de las propiedades CSS3.

Valor inicial	normal
Se aplica a	Todos los elementos.
Heredado	Sí.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.wordBreak = "break-all";

Sintaxis

Valores de CSS word-break

word-break: normal | break-all | keep-all | break-word | initial | inherit;

Ejemplo de la propiedad word-break:

Ejemplo de código CSS word-break

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        font-family: Helvetica, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #8ebf42;
      }
      p {
        word-break: break-all;
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #eee;
        width: 1em;
      }
    </style>
  </head>
  <body>
    <p>element</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

En el ejemplo anterior, el <p> tiene solo 1em de ancho, por lo que cada letra se ajusta a su propia línea — una demostración clara de que break-all ignora los puntos de ruptura normales.

Ejemplo de la propiedad word-break con el valor "break-all":

Ejemplo de código CSS word-break break-all

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        font-size: 0.95em;
        line-height: 1.5;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
      .container {
        margin: 50px auto;
        max-width: 700px;
      }
      .text {
        padding: 20px;
        background-color: #666;
        color: white;
        text-align: justify;
      }
      .break {
        word-break: break-all;
      }
      strong {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <h2>Word-break property example</h2>
    <div class="container">
      <h3>Text breaks inside words</h3>
      <p class="text break">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <strong>Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <strong>remaining</strong> essentially unchanged.
      </p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
normal	Usa las reglas de salto de línea. Este es el valor predeterminado de esta propiedad.
break-all	Rompe entre cualquier par de caracteres, independientemente del desbordamiento. Esto puede dificultar la lectura del texto.
keep-all	No se deben usar saltos de palabra para texto chino/japonés/coreano (CJK). El comportamiento del texto no CJK es el mismo que para normal.
break-word	En desuso. Rompe palabras en puntos arbitrarios si no hay puntos de ruptura aceptables en la línea. Usa `overflow-wrap: anywhere` en su lugar.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Consejos y errores comunes

break-all perjudica la legibilidad. Como puede dividir una palabra en cualquier carácter, el texto ordinario se vuelve difícil de leer. Úsalo solo cuando el contenido no sea texto corrido (códigos, hashes, URLs) o cuando realmente quieras que cada línea se llene hasta el borde.
Prefiere overflow-wrap para "simplemente no desbordar". Si tu único objetivo es evitar que una URL larga rompa el diseño, overflow-wrap: break-word mantiene las palabras normales intactas y solo rompe la problemática.
break-word está en desuso. El valor break-word de word-break es heredado y se comporta como overflow-wrap: anywhere más word-break: normal. No lo uses en código nuevo — establece overflow-wrap: anywhere en su lugar.
keep-all es para texto CJK. Previene los saltos dentro de palabras chinas, japonesas y coreanas. El texto Latino se trata como normal, por lo que no tiene ningún efecto visible en contenido en inglés.
Combínalo con hyphens para texto más elegante. Cuando quieras que las palabras largas se ajusten en puntos sensibles con un guión, usa overflow-wrap junto con hyphens en lugar de forzar break-all.

Compatibilidad con navegadores

word-break es compatible con todos los navegadores modernos. Los valores normal, break-all y keep-all están ampliamente disponibles; el valor heredado break-word es compatible por razones de retrocompatibilidad, pero debe evitarse.

Práctica

¿Cuál afirmación es correcta sobre la propiedad word-break?

El valor break-all se usa para texto chino/japonés/coreano (CJK).El valor keep-all rompe cada palabra en cualquier carácter para evitar el desbordamiento.El valor initial hace que la propiedad use su valor predeterminado.