Quebra de palavras - CSS-Tricks

A word-breakpropriedade em CSS pode ser usada para alterar quando as quebras de linha devem ocorrer. Normalmente, as quebras de linha no texto só podem ocorrer em determinados espaços, como quando há um espaço ou um hífen.

No exemplo abaixo, podemos fazer as word-breakletras entre:

p ( word-break: break-all; )

Se definirmos a largura do texto para um em, a palavra será dividida em cada letra:

Veja o texto Pen Setting verticalmente com quebra de palavra por CSS-Tricks (@ css-tricks) no CodePen.

Este valor é frequentemente usado em locais com conteúdo gerado pelo usuário para que longas strings não corram o risco de quebrar o layout. Um exemplo muito comum é uma cópia longa e URL colada. Se esse URL não tiver hifens, ele pode se estender além da caixa pai e ter uma aparência ruim ou pior, causar problemas de layout.

Veja os links Pen Fixing with word-break por CSS-Tricks (@ css-tricks) no CodePen.

Valores

normal: use as regras padrão para quebra de palavras.
break-all: qualquer palavra / letra pode quebrar na próxima linha.
keep-all: para palavras de texto chinês, japonês e coreano não são quebradas. Caso contrário, é o mesmo que normal.

Essa propriedade também é frequentemente usada em conjunto com a propriedade hífens para que, quando ocorrerem quebras, um hífen seja inserido, conforme o padrão dos livros.

O uso completo, com os prefixos de fornecedor necessários, é:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Usar essas propriedades no seletor universal pode ser útil se você tiver um site com muito conteúdo gerado pelo usuário. Embora seja um aviso justo, pode parecer estranho em títulos e texto pré-formatado (

)

Relacionado

overflow-wrap
hífens
espaço em branco
Tratamento de palavras longas e URLs

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.