Propiedad word-break

La propiedad word-break permite dividir las letras de una palabra larga en una nueva línea, si esa palabra no cabe en el ancho del contenedor.

Sintaxis

cssselector {
  word-break: break-all | keep-all | normal;
}

Valor	Descripción
`break-all`	Fuerza a las palabras largas a dividirse en una nueva línea, si la palabra no cabe en el contenedor.
`keep-all`	Para dividir caracteres CJK (chino, japonés, coreano).
`normal`	Comportamiento estándar: si una palabra larga no cabe en el ancho del contenedor, simplemente se saldrá de sus límites (y 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 límites (y comenzará en una nueva línea):

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

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

Результат:

Y ahora, las letras que no cabían simplemente se dividirán en la siguiente línea:

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

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

Результат:

la propiedad overflow-wrap,
que también permite dividir las letras de una palabra larga en una nueva línea
la propiedad hyphens,
que activa la división de palabras por sílabas
la propiedad overflow,
que recorta las partes que se salen de los límites del bloque
la etiqueta wbr,
que implementa saltos de línea suaves usando HTML
la etiqueta br,
con la que se puede forzar un salto de línea en el texto