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

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

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

Результат:

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

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

Результат:

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