Propriedade word-break

A propriedade word-break 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 {
	word-break: break-all | keep-all | normal;
}

Valor	Descrição
`break-all`	Força palavras longas a serem quebradas em uma nova linha, se a palavra não couber no contêiner.
`keep-all`	Para quebra de caracteres ideográficos.
`normal`	Comportamento padrão: se uma palavra longa não couber na largura do contêiner - ela simplesmente ultrapassará 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 ultrapassará suas bordas (e começará em uma nova linha):

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

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

E agora as letras que não couberam simplesmente serão movidas para a próxima linha:

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

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

a propriedade overflow-wrap,
que também permite quebrar as letras de uma palavra longa em uma nova linha
a propriedade hyphens,
que ativa a hifenização de palavras por sílabas
a propriedade overflow,
que corta as partes que ultrapassam a borda do bloco
a tag wbr,
que implementa quebras suaves usando HTML
a tag br,
que pode forçar a quebra de texto em uma nova linha