Propriedade overflow-wrap

A propriedade overflow-wrap permite quebrar as letras de uma palavra longa em uma nova linha, se essa palavra não couber na largura do contêiner.

Sintaxe

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

Valor	Descrição
`break-word`	Força palavras longas a serem quebradas em uma nova linha, se a palavra não couber no contêiner. Neste caso, a palavra começará em uma nova linha.
`normal`	Comportamento padrão: se uma palavra longa não caber na largura do contêiner - ela simplesmente transbordará beyond de sua borda (e começará em uma nova linha).

Valor padrão: normal.

Neste exemplo, uma palavra muito longa não caberá no contêiner e transbordará beyond de suas bordas (e começará em uma nova linha):

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;
}

Результат:

E agora, as letras que não cabiam serão simplesmente quebradas para a próxima linha (a palavra longa ainda começará em uma nova linha):

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;
}

Результат:

a propriedade word-break,
que também permite quebrar as letras de uma palavra longa em uma nova linha
a propriedade word-wrap,
que é um nome legado para a propriedade overflow-wrap
a propriedade hyphens,
que ativa a hifenização de palavras
a tag wbr,
que implementa quebras de oportunidade via HTML
a tag br,
que pode ser usada para forçar a quebra de texto em uma nova linha