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

seletor {
	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):

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

#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):

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

#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