Propiedad CSS word-wrap

La propiedad word-wrap divide palabras largas que de otro modo no podrían romperse, para que quepan dentro de su contenedor en lugar de desbordarse más allá de su borde.

Normalmente, un navegador solo rompe el texto en "oportunidades de salto suave" — espacios, guiones y caracteres similares. Una cadena larga sin ninguna de esas oportunidades (una URL, un hash, un nombre químico, un ID largo) no tiene dónde dividirse, por lo que se sale de un cuadro estrecho y puede romper tu maquetación. word-wrap permite al navegador dividir dentro de esa palabra como último recurso.

Cuándo usarla

Recurre a word-wrap siempre que texto generado por el usuario o impredecible pueda ser más largo que su contenedor:

URLs y rutas de archivo mostradas dentro de una tarjeta de ancho fijo o una barra lateral.
Direcciones de correo electrónico, nombres de usuario o tokens en una columna estrecha.
Cadenas largas sin interrupciones en tablas, burbujas de chat o hilos de comentarios.
Cualquier diseño responsivo donde no se pueda garantizar dónde se cortará el texto.

Solo importa para palabras que de otro modo no pueden dividirse. El texto normal en prosa ya se rompe en los espacios, así que la propiedad no tiene efecto visible en esos casos.

word-wrap vs. overflow-wrap

word-wrap es el nombre original de Microsoft para lo que la especificación CSS estandarizó posteriormente como overflow-wrap. Los dos son alias — hacen exactamente lo mismo y aceptan los mismos valores. Los navegadores asignan word-wrap a overflow-wrap internamente.

Usa overflow-wrap en código nuevo para cumplir con los estándares; conserva word-wrap si necesitas compatibilidad con navegadores muy antiguos, ya que algunos motores heredados solo reconocen el nombre más antiguo.

Advertencia

No confundas word-wrap con word-break. word-wrap/overflow-wrap solo divide una palabra cuando de otro modo se desbordaría — las palabras normales permanecen intactas. word-break: break-all es más agresivo: divide palabras en cualquier carácter, incluso cuando cabrían. Elige word-wrap cuando quieras un ajuste limpio que solo actúe en casos de emergencia.

word-wrap es una de las propiedades CSS3, y solo tiene efecto cuando la propiedad white-space permite el ajuste (por ejemplo, no tiene efecto con white-space: nowrap).

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

Sintaxis

Valores de CSS word-wrap

word-wrap: normal | break-word | initial | inherit;

Ejemplo de la propiedad word-wrap con el valor "normal":

Ejemplo de código CSS word-wrap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
       dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Con normal, las cadenas largas simply... e industry... no tienen oportunidad de ruptura, por lo que sobresalen del cuadro de 120px.

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

Ejemplo CSS word-wrap break-word

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
      dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ahora break-word permite al navegador dividir esas cadenas largas en medio de la palabra en el borde del cuadro, de modo que el contenido permanece ordenadamente dentro de su contenedor de 120px.

Valores

Valor	Descripción
normal	Divide palabras solo en los puntos de ruptura permitidos. Este es el valor predeterminado.
break-word	Permite dividir palabras irrompibles si superan el ancho del contenedor.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

overflow-wrap — el nombre estandarizado para el mismo comportamiento; preferido en código nuevo.
word-break — ruptura más agresiva que puede dividir palabras incluso cuando cabrían.
white-space — controla si el texto se ajusta o no; word-wrap solo se aplica cuando el ajuste está permitido.
word-spacing — ajusta el espacio entre palabras (sin relación con la ruptura, pero fácil de confundir por su nombre).

Práctica

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

Es una propiedad animable.Solo tiene efecto cuando la propiedad white-space permite el ajuste.Su valor break-words divide las palabras en los puntos de ruptura permitidos.