word-break

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
word-breakChrome Full support 1Edge Full support 12Firefox Full support 15IE Full support 5.5
Notes
Full support 5.5
Notes
Notes No version of Internet Explorer supports the initial value.
Full support 8
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Don't use -ms-word-break, which is a synonym for word-break.
Opera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 15Opera Android Full support YesSafari iOS Full support 2Samsung Internet Android Full support Yes
break-wordChrome Full support 1Edge No support NoFirefox Full support 67IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 67Opera Android Full support 14Safari iOS Full support 2Samsung Internet Android Full support 1.0
keep-allChrome Full support 44Edge Full support 12Firefox Full support 15IE Full support 5.5Opera Full support 31Safari Full support 9WebView Android Full support 44Chrome Android Full support 44Firefox Android Full support 15Opera Android Full support 32Safari iOS Full support 9Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

 

Veja também