Propiedad word-wrap de CSS

La propiedad word-wrap rompe palabras largas para que quepan dentro de su contenedor. Esta propiedad permite romper palabras que de otro modo se desbordarían.

La propiedad controla cómo se manejan las palabras largas cuando exceden el ancho del contenedor. No acepta valores positivos ni negativos; esos corresponden a la propiedad word-spacing. Cuando se establece en normal, las palabras se rompen solo en los puntos de ruptura permitidos.

La propiedad word-wrap es una de las propiedades de CSS3.

Solo tiene efecto cuando la propiedad white-space permite el ajuste de línea.

INFO

En CSS moderno, word-wrap es un alias de la propiedad overflow-wrap.

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 word-wrap en CSS

css

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

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

Ejemplo de código CSS word-wrap

html

<!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>

Try it Yourself »

Resultado

Propiedad CSS word-wrap

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

Ejemplo de word-wrap break-word en CSS

html

<!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>

Try it Yourself »

Valores

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

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 de línea.Su valor break-words rompe las palabras en los puntos de ruptura permitidos.

Propiedad word-wrap de CSS ​

Sintaxis ​

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

Resultado ​

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

Valores ​