Propriedade CSS overflow-wrap

A propriedade overflow-wrap informa ao navegador se é permitido quebrar uma string normalmente inquebrável — uma palavra longa, uma URL ou um hash — em uma nova linha, para que o texto não ultrapasse os limites do contêiner.

Normalmente, o CSS insere quebras de linha apenas em "oportunidades de quebra automática", como espaços e hifens. Uma string longa sem nenhum desses caracteres (supercalifragilisticexpialidocious ou https://example.com/a/very/long/path) não tem onde quebrar, então estoura o contêiner. O overflow-wrap permite autorizar uma quebra dentro dessa string como último recurso.

Quando usar

Use overflow-wrap quando o conteúdo for gerado pelo usuário ou imprevisível — comentários, consultas de pesquisa, endereços de e-mail, links, identificadores de código. Exatamente esses são os tipos de strings que não têm pontos de quebra naturais e podem estourar uma coluna de largura fixa, um card ou um item flex. Uma regra defensiva comum é:

.user-content {
  overflow-wrap: break-word;
}

Isso mantém o layout intacto sem afetar o texto normal, pois a quebra só ocorre quando uma palavra estouraria o contêiner.

Valores em resumo

A propriedade overflow-wrap tem três valores significativos — normal, break-word e anywhere — além das palavras-chave CSS universais initial e inherit.

normal — o valor padrão. As palavras só quebram em oportunidades normais (espaços, hifens). Uma palavra muito longa estoura o contêiner.
break-word — uma palavra longa quebra em um ponto arbitrário apenas quando estouraria o contêiner. Crucialmente, ela não reduz a largura intrínseca mínima do elemento, portanto raramente afeta o restante do layout.
anywhere — semelhante ao break-word, mas a oportunidade de quebra é considerada quando o navegador calcula o tamanho mínimo do conteúdo do elemento, de modo que um item flex ou grid pode encolher mais do que sua palavra mais longa.

Informação

overflow-wrap é o nome padrão da propriedade mais antiga word-wrap. O word-wrap é mantido como alias para compatibilidade retroativa — ambos aceitam os mesmos valores e se comportam de forma idêntica. Use overflow-wrap em código novo.

Overflow-wrap vs word-break

overflow-wrap e word-break influenciam onde as linhas podem quebrar, mas respondem a perguntas diferentes.

overflow-wrap quebra uma palavra apenas como último recurso, quando ela estouraria o contêiner, independentemente do idioma.
word-break controla a quebra de forma proativa. É projetado principalmente para idiomas CJK (chinês, japonês, coreano), onde quebras entre caracteres são normais, e seu valor break-all quebra palavras latinas no meio do caractere mesmo quando elas caberiam.

Regra geral: use overflow-wrap: break-word para evitar o estouro sem alterar a quebra normal; use word-break: break-all apenas quando realmente quiser uma quebra agressiva em nível de caractere.

Para quebrar palavras em limites de sílabas com hifenização, veja a propriedade hyphens, e para controlar espaços em branco e quebras em geral, veja white-space.

Resumo da propriedade

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

Sintaxe

Sintaxe CSS do overflow-wrap

overflow-wrap: normal | anywhere | break-word | initial | inherit;

Observe que a ordem dos valores de palavras-chave importa em declarações no estilo abreviado, mas para overflow-wrap você simplesmente define um valor por vez.

Exemplo da propriedade overflow-wrap

Cada parágrafo abaixo está limitado a 200px. A string longa dummydummy… não tem espaços, então com normal ela estoura o contêiner, enquanto break-word e anywhere forçam a quebra dentro da caixa.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 200px;
        margin: 3px;
        background: #ccc;
      }
      .anywhere {
        overflow-wrap: anywhere;
      }
      .break-word {
        overflow-wrap: break-word;
      }
      .normal {
        overflow-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-wrap property example</h2>
    <h3>Overflow-wrap: normal</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: anywhere</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: break-word</h3>
    <p>Lorem Ipsum has been the industry's standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
normal	As linhas só quebrarão de acordo com as regras normais de quebra de linha. As palavras não serão quebradas mesmo que ultrapassem o contêiner. Este é o valor padrão desta propriedade.
anywhere	Palavras longas ou URLs serão quebradas em qualquer ponto se não houver pontos de quebra aceitáveis na linha. Caracteres de hifenização não são considerados pontos de quebra aceitáveis, mesmo que a propriedade `hyphens` esteja definida.
break-word	Palavras longas ou strings que não cabem no contêiner serão quebradas em um ponto arbitrário para forçar uma quebra de linha. Oportunidades de quebra automática não são consideradas ao calcular o tamanho mínimo do conteúdo do elemento.
initial	Define o valor padrão da propriedade.
inherit	Herda a propriedade do elemento pai.

Prática

Qual é a função da propriedade CSS 'overflow-wrap'?

Determina como o conteúdo que transborda e não é visível é sinalizado ao usuárioEspecifica se o navegador deve quebrar linhas dentro de palavras para evitar o estouroControla o comportamento da propriedade 'break-inside'Define como o conteúdo extra é tratado, seguindo a direção oposta à escritaDefine onde deve ocorrer uma quebra de página ou coluna