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 AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome 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 Requires the vendor prefix: -ms-
Notes Don't use -ms-word-break, which is a synonym for word-break.
Opera Full support 15Safari Full support YesWebView Android Full support YesChrome Android Full support 18Edge Mobile Full support YesFirefox Android Full support 15Opera Android No support NoSafari iOS ? Samsung Internet Android Full support Yes
keep-allChrome Full support 44Edge Full support YesFirefox Full support 15IE Full support 5.5Opera Full support 31Safari Full support 9WebView Android Full support YesChrome Android Full support YesEdge Mobile No support NoFirefox Android Full support 15Opera Android No support NoSafari iOS Full support 9Samsung Internet Android Full support Yes
break-wordChrome Full support YesEdge Full support YesFirefox No support NoIE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile No support NoFirefox Android No support NoOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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

Etiquetas do documento e colaboradores

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