Propiedad overflow-wrap

La propiedad overflow-wrap permite transferir las letras de una palabra larga a una nueva línea, si esa palabra no cabe en el ancho del contenedor.

Sintaxis

cssselector {
  overflow-wrap: break-word | normal;
}

Valor	Descripción
`break-word`	Obliga a las palabras largas a dividirse en una nueva línea, si la palabra no cabe en el contenedor. Al mismo tiempo, la palabra comenzará en una nueva línea.
`normal`	Comportamiento estándar: si una palabra larga no cabe en el ancho del contenedor, simplemente se saldrá de su borde (al mismo tiempo comenzará en una nueva línea).

Valor por defecto: normal.

En este ejemplo, una palabra muy larga no cabrá en el contenedor y se saldrá de sus bordes (al mismo tiempo comenzará en una nueva línea):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  word-wrap: normal;
  overflow-wrap: normal;
  border: 1px solid red;
  width: 200px;
}

Результат:

Y ahora las letras que no cabían simplemente se transferirán a la siguiente línea (al mismo tiempo la palabra larga comenzará en una nueva línea):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow-wrap: break-word;
  border: 1px solid red;
  width: 200px;
}

Результат:

la propiedad word-break,
que también permite transferir letras de una palabra larga a una nueva línea
la propiedad word-wrap,
que es el nombre obsoleto de la propiedad overflow-wrap
la propiedad hyphens,
que activa la división de palabras en sílabas
la etiqueta wbr,
que implementa saltos de línea suaves usando HTML
la etiqueta br,
con la que se puede forzar que el texto salte a una nueva línea