Propriedade CSS word-wrap

A propriedade word-wrap quebra palavras longas que, de outra forma, seriam inquebrável, para que caibam dentro do contêiner em vez de ultrapassar sua borda.

Normalmente, o navegador só quebra o texto em "oportunidades de quebra suave" — espaços, hífens e caracteres semelhantes. Uma sequência longa sem essas oportunidades (uma URL, um hash, um nome químico, um ID longo) não tem onde quebrar, então ela extravasa a caixa estreita e pode quebrar o seu layout. A propriedade word-wrap permite que o navegador quebre dentro dessa palavra como último recurso.

Quando usar

Recorra à propriedade word-wrap sempre que textos gerados por usuários ou imprevisíveis puderem ser mais longos do que seu contêiner:

URLs e caminhos de arquivo exibidos dentro de um cartão ou barra lateral de largura fixa.
Endereços de e-mail, nomes de usuário ou tokens em uma coluna estreita.
Sequências longas sem quebra em tabelas, balões de chat ou encadeamentos de comentários.
Qualquer layout responsivo onde não é possível garantir onde o texto vai quebrar.

Isso só importa para palavras que, de outra forma, não poderiam quebrar. A prosa normal já quebra nos espaços, portanto a propriedade não tem efeito visível nesses casos.

word-wrap vs. overflow-wrap

word-wrap é o nome original da Microsoft para o que a especificação CSS padronizou posteriormente como overflow-wrap. Os dois são aliases — fazem exatamente a mesma coisa e aceitam os mesmos valores. Os navegadores mapeiam word-wrap para overflow-wrap internamente.

Use overflow-wrap em código novo para conformidade com os padrões; mantenha word-wrap se precisar oferecer suporte a navegadores muito antigos, pois alguns motores legados reconhecem apenas o nome mais antigo.

Aviso

Não confunda word-wrap com word-break. word-wrap/overflow-wrap só quebra uma palavra quando ela ultrapassaria o contêiner — palavras normais permanecem intactas. word-break: break-all é mais agressivo: quebra palavras em qualquer caractere, mesmo quando caberiam. Escolha word-wrap quando quiser uma quebra limpa que só seja acionada em emergências.

word-wrap é uma das propriedades CSS3, e só tem efeito quando a propriedade white-space permite a quebra de linha (por exemplo, não tem efeito com white-space: nowrap).

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

Sintaxe

Valores da propriedade CSS word-wrap

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

Exemplo da propriedade word-wrap com o valor "normal":

Exemplo de código CSS word-wrap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
       dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Com normal, as sequências longas simply... e industry... não têm oportunidade de quebra, então ultrapassam a caixa de 120px.

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

Exemplo CSS word-wrap break-word

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
      dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Agora, break-word permite que o navegador divida essas sequências longas no meio da palavra, na borda da caixa, mantendo o conteúdo organizado dentro do contêiner de 120px.

Valores

Valor	Descrição
normal	Quebra palavras apenas nos pontos de quebra permitidos. Este é o valor padrão.
break-word	Permite a quebra de palavras inquebrável caso ultrapassem a largura do contêiner.
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

overflow-wrap — o nome padronizado para o mesmo comportamento; prefira-o em código novo.
word-break — quebra mais agressiva que pode dividir palavras mesmo quando caberiam.
white-space — controla se o texto quebra ou não; word-wrap só se aplica quando a quebra é permitida.
word-spacing — ajusta o espaço entre as palavras (não relacionado à quebra, mas fácil de confundir pelo nome).

Prática

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

É uma propriedade animável.Só tem efeito quando a propriedade white-space permite a quebra de linha.O valor break-words quebra as palavras nos pontos de quebra permitidos.