Há momentos em que uma seqüência de texto muito longa pode estourar o contêiner de um layout.
Por exemplo:
Aqui está o furo:
overflow-wrap: break-word;certifique-se de que o fio longo se enrole e não saia do contêiner. Você também pode usarword-wrapporque, como diz a especificação, eles são literalmente apenas nomes alternativos um para o outro. Alguns navegadores suportam um e não o outro. Firefox (v43 testado) suporta apenasword-wrap. Blink (Chrome v45 testado) vai levar qualquer um.- Estando
overflow-wrapem uso por si só, as palavras irão quebrar em qualquer lugar que precisem. Se houver um caractere de “quebra aceitável” (como um travessão literal, por exemplo), ele será interrompido, caso contrário, apenas fará o que precisa ser feito. - Você também pode usar
hyphens, porque então ele tentará adicionar com bom gosto um hífen onde pode quebrar se o navegador suportar (o Blink não o faz no momento da escrita, o Firefox sim). word-break: break-all;é dizer ao navegador que não há problema em quebrar a palavra onde for necessário. Mesmo que meio que faça isso de qualquer maneira, não tenho certeza em quais casos é 100% necessário.
Se você quiser ser mais manual com hífens, pode sugeri-los em sua marcação. Veja mais na página MDN.
Suporte de navegador
Para word-break:
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.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 44 | 15 | 5,5 | 12 | 9 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Para hypens:
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.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Para overflow-wrap:
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.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6,1 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 | 7,0-7,1 |
Para text-overflow:
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.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 4 | 7 | 6 | 12 | 3,1 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 | 3,2 |
Prevenção de estouro com reticências
Outra abordagem a ser considerada é truncar o texto completamente e adicionar reticências onde a string de texto atinge o contêiner:
.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )O bom do uso text-overflowé que ele tem suporte universal.
Exemplos
Veja Caneta Hifenizar Palavras Longas por CSS-Tricks (@ css-tricks) em CodePen.
Veja as reticências da caneta por CSS-Tricks (@ css-tricks) no CodePen.
Veja o quebra automática de linha Pen Descobrindo por Chris Coyier (@chriscoyier) em CodePen.
Mais recursos
- Michael Scharnagl: Lidando com palavras longas em CSS
- Kenneth Auchenberg: quebra automática de linha / hifenização usando CSS
- MDN: quebra de linha, quebra de palavra, hifens
- Especificação: Texto CSS Nível 3
Para quem gosta de SCSS
Esses tendem a ser o tipo de coisa que você espalha no código quando necessário, então eles são ótimos @mixins:
@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )