word-break

Resumo

A propriedade CSS word-break é usada para especificar se as linhas devem ser quebradas dentro das palavras.

Sintaxe

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* Global values */
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 qualquer caractere 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.

Sintaxe formal

normal | break-all | keep-all

Examplos

Conteúdo HTML

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

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

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

Conteúdo CSS

.narrow {
    padding: 5px;
    border: 1px solid;
    width: 8em;
}

.normal {
    word-break: normal;
}

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

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

Especificações

Compatibilidade entre os navegadores

[1] IE8 introduziu -ms-word-break como um sinônimo para word-break. Não use o prefixo -ms-.

[2] WebKit bug 123782.

Veja também

• word-wrap