Propriedade CSS word-break

A propriedade CSS word-break controla como as palavras são quebradas quando o texto atinge a borda do seu contêiner. Ela determina se o navegador tem permissão para dividir uma palavra entre caracteres a fim de evitar que conteúdos longos e ininterruptos transbordem.

Por padrão, as quebras de linha ocorrem apenas em "oportunidades de quebra suave" — espaços, hifens e pontos de quebra semelhantes. Uma string longa sem espaços (uma URL, um hash, um identificador longo) não quebrará de jeito nenhum e irá transbordar o seu contêiner. Definir word-break: break-all informa ao navegador que ele pode quebrar a linha em qualquer caractere, fazendo com que o texto seja reposicionado em vez de vazar para fora.

Isso é especialmente útil para:

URLs longas, caminhos de arquivo ou endereços de e-mail em colunas estreitas.
Conteúdo gerado pelo usuário em que não é possível prever o comprimento das palavras.
Texto misto CJK (chinês / japonês / coreano) e latino, onde o comportamento de quebra difere entre os scripts.

word-break está intimamente relacionado a overflow-wrap (anteriormente word-wrap) e white-space. A diferença principal: overflow-wrap: anywhere só quebra uma palavra quando ela transbordaria caso contrário, enquanto word-break: break-all quebra agressivamente em cada linha, mesmo quando havia um ponto de quebra normal disponível. Prefira overflow-wrap para os casos comuns de "não deixe essa URL transbordar", e use word-break quando quiser especificamente uma quebra em nível de caractere.

Esta propriedade é uma das propriedades CSS3.

Valor Inicial	normal
Aplica-se a	Todos os elementos.
Herdado	Sim.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.wordBreak = "break-all";

Sintaxe

Valores de CSS word-break

word-break: normal | break-all | keep-all | break-word | initial | inherit;

Exemplo da propriedade word-break:

Exemplo de código CSS word-break

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        font-family: Helvetica, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #8ebf42;
      }
      p {
        word-break: break-all;
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #eee;
        width: 1em;
      }
    </style>
  </head>
  <body>
    <p>element</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

No exemplo acima, o <p> tem apenas 1em de largura, então cada letra vai para sua própria linha — uma demonstração clara de break-all ignorando os pontos de quebra normais.

Exemplo da propriedade word-break com o valor "break-all":

Exemplo de código CSS word-break break-all

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        font-size: 0.95em;
        line-height: 1.5;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
      .container {
        margin: 50px auto;
        max-width: 700px;
      }
      .text {
        padding: 20px;
        background-color: #666;
        color: white;
        text-align: justify;
      }
      .break {
        word-break: break-all;
      }
      strong {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <h2>Word-break property example</h2>
    <div class="container">
      <h3>Text breaks inside words</h3>
      <p class="text break">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <strong>Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <strong>remaining</strong> essentially unchanged.
      </p>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
normal	Usa as regras de quebra de linha. Este é o valor padrão da propriedade.
break-all	Quebra entre quaisquer dois caracteres, independentemente do transbordamento. Isso pode tornar o texto difícil de ler.
keep-all	Quebras de palavra não devem ser usadas para texto chinês/japonês/coreano (CJK). O comportamento para texto não-CJK é o mesmo que para normal.
break-word	Obsoleto. Quebra palavras em pontos arbitrários se não houver pontos de quebra aceitáveis na linha. Use `overflow-wrap: anywhere` em vez disso.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Dicas e erros comuns

break-all prejudica a legibilidade. Por poder dividir uma palavra em qualquer caractere, a prosa comum fica difícil de ler. Use-o apenas quando o conteúdo não for prosa (códigos, hashes, URLs) ou quando você realmente quiser que cada linha seja preenchida até a borda.
Prefira overflow-wrap para "apenas não transbordar." Se o seu único objetivo é impedir que uma URL longa quebre o layout, overflow-wrap: break-word mantém as palavras normais intactas e só quebra a problemática.
break-word está obsoleto. O valor break-word de word-break é legado e se comporta como overflow-wrap: anywhere mais word-break: normal. Não o use em código novo — defina overflow-wrap: anywhere em vez disso.
keep-all é para texto CJK. Ele impede quebras dentro de palavras em chinês, japonês e coreano. O texto latino é tratado como normal, portanto não tem efeito visível em conteúdo em inglês.
Combine com hyphens para prosa mais elegante. Quando você deseja que palavras longas sejam quebradas em pontos adequados com um hífen, combine overflow-wrap com hyphens em vez de forçar break-all.

Suporte a navegadores

word-break é suportado em todos os navegadores modernos. Os valores normal, break-all e keep-all estão amplamente disponíveis; o valor legado break-word é suportado para compatibilidade com versões anteriores, mas deve ser evitado.

Prática

Qual afirmação está correta sobre a propriedade word-break?

O valor break-all é usado para texto chinês/japonês/coreano (CJK).O valor keep-all quebra cada palavra em qualquer caractere para evitar o transbordamento.O valor initial faz a propriedade usar seu valor padrão.