A propriedade CSS word-break é usada para especificar se o navegador deve inserir ou não quebras de linha onde, normalmente, o texto vazaria de seu container.

 

Nota: comparando com overflow-wrap, word-break criará uma quebra de linha no ponto exato em que o texto vazaria, mesmo que uma palavra pudesse ser colocada por completo em uma nova linha sem a necessidade de quebra da palavra.

Sintaxe

/* Valores específicos */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* Valores globais */
word-break: inherit;
word-break: initial;
word-break: unset;

Valores

normal
Usa a regra de quebra de linha padrão.
break-all
Quebras de linha podem ser inseridas entre quaisquer caracteres de texto não-CJC (Chinês/Japonês/Coreano).
keep-all
Não permite quebra de linha para texto CJC. Texto não-CJC se comporta como normal.
break-word
Para evitar o vazamento, palavras que normalmente não seriam quebradas podem ser quebradas em pontos arbitrários se não houver pontos de quebra válidos na linha.

Sintaxe formal

normal | break-all | keep-all | break-word

Examplos

Conteúdo HTML

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

<p>4. <code>word-break: break-word</code></p> 
<p class="breakWord narrow">This is a long and 
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

Conteúdo CSS

.narrow {
    padding: 5px;
    border: 1px solid;
    display: table;
    max-width: 100%;
}

.normal {
    word-break: normal;
}

.breakAll {
    word-break: break-all;
}

.keepAll {
    word-break: keep-all;
}

.breakWord {
    word-break: break-word;
}

Especificações

Especificação Status Commentário
CSS Text Module Level 3
The definition of 'word-break' in that specification.
Rascunho atual Definição inicial

Compatibilidade entre os navegadores

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support11215

5.51

8 -ms- 2

15 Yes
keep-all44 No155.5319
break-word Yes No No No Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes18 Yes15 No ? Yes
keep-all Yes Yes No15 No9 Yes
break-word Yes Yes No No Yes Yes Yes

1. No version of Internet Explorer supports the initial value.

2. Don't use -ms-word-break, which is a synonym for word-break.

 

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: srsaude, teoli, anderson-fachini
Última atualização por: srsaude,