Atualmente, estou me perguntando qual é a diferença entre os dois. Quando usei os dois, eles parecem quebrar a palavra se não estiver encaixando no recipiente. Mas por que o W3C fez duas maneiras de fazer isso?

A especificação W3 que fala sobre isso parece sugerir que word-break: break-allé para exigir um comportamento específico com o texto CJK (chinês, japonês e coreano), enquanto que word-wrap: break-wordé o comportamento mais geral, que não reconhece CJK.

word-wrap: break-word mudou recentemente para overflow-wrap: break-word

• envolverá palavras longas na próxima linha.
• ajusta palavras diferentes para que não se partam no meio.

word-break: break-all

• independentemente de ser uma palavra contínua ou muitas palavras, as divide na borda do limite de largura. (ou seja, mesmo com os caracteres da mesma palavra)

Portanto, se você tiver muitas extensões de tamanho fixo que obtêm conteúdo dinamicamente, pode preferir usar word-wrap: break-word, pois dessa forma, apenas as palavras contínuas são divididas no meio e, no caso de uma frase com muitas palavras, os espaços são ajustados para obter palavras intactas. (sem intervalo dentro de uma palavra).

E se isso não importa, escolha qualquer um.

Com word-break, uma palavra muito longa começa no ponto em que deve começar e está sendo quebrada pelo tempo que for necessário

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

No entanto, com word-wrap, uma palavra muito longa NÃO começará no ponto em que deve começar. enrola para a próxima linha e, em seguida, é interrompida pelo tempo necessário

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

word-wrapfoi renomeado para overflow-wrapprovavelmente evitar essa confusão.

Agora é isso que temos:

transbordamento

A propriedade overflow-wrap é usada para especificar se o navegador pode ou não quebrar linhas dentro das palavras para impedir o estouro quando uma sequência inquebrável é longa demais para caber na caixa que o contém.

Valores possíveis:

• normal : indica que as linhas só podem quebrar nos pontos de quebra de palavras normais.

• break-word : indica que palavras normalmente inquebráveis ​​podem ser quebradas em pontos arbitrários se não houver pontos de interrupção aceitáveis ​​na linha.

fonte .

quebra de palavra

A propriedade CSS de quebra de palavra é usada para especificar se as linhas devem ser quebradas nas palavras.

• normal : use a regra de quebra de linha padrão.
• break-all : quebras de palavras podem ser inseridas entre qualquer caractere para texto não CJK (chinês / japonês / coreano).
• manter tudo : não permita quebras de palavras para o texto CJK. O comportamento de texto não CJK é igual ao normal.

fonte .

Agora, voltando à sua pergunta, a principal diferença entre quebra de quebra e quebra de palavra é que a primeira determina o comportamento em uma situação de excesso , enquanto a segunda determina o comportamento em uma situação normal (sem excesso). Uma situação de estouro ocorre quando o contêiner não possui espaço suficiente para conter o texto. Quebrar linhas nessa situação não ajuda porque não há espaço (imagine uma caixa com largura e altura fixas).

Assim:

• overflow-wrap: break-word: Em uma situação de estouro, quebre as palavras.
• word-break: break-all: Em uma situação normal, basta quebrar as palavras no final da linha. Um estouro não é necessário.

Pelo menos no Firefox (a partir da v24) e Chrome (a partir da v30), quando aplicado ao conteúdo em um tableelemento:

word-wrap:break-word

não causará quebra de palavras longas, o que pode resultar na tabela exceder os limites de seu contêiner;

word-break:break-all

irá resultar em palavras de embrulho, e a mesa de montagem dentro do seu contentor.

demonstração do jsfiddle .

É tudo o que posso descobrir. Não tenho certeza se isso ajuda, mas pensei em adicioná-lo à mistura.

QUEBRA DE LINHA

Esta propriedade especifica se a linha renderizada atual deve ser interrompida se o conteúdo exceder o limite da caixa de renderização especificada para um elemento (isso é semelhante em alguns aspectos às propriedades 'clip' e 'overflow' na intenção). Essa propriedade deve ser aplicada apenas se o elemento tiver uma renderização visual, for um elemento embutido com altura / largura explícitas, estiver absolutamente posicionado e / ou for um elemento de bloco.

WORD-BREAK

Esta propriedade controla o comportamento de quebra de linha dentro das palavras. É especialmente útil nos casos em que vários idiomas são usados ​​em um elemento.

Há uma enorme diferença. break-allé basicamente inutilizável para renderizar texto legível.

Digamos que você tenha a string This is a text from an old magazineem um contêiner que cabe apenas 6 caracteres por linha.

word-break: break-all

This i
s a te
xt fro
m an o
ld mag
azine

Como você pode ver, o resultado é terrível. break-alltentará encaixar o máximo de caracteres em cada linha possível, dividirá até uma palavra de 2 letras como "é" em 2 linhas! É ridículo. É por isso que break-allraramente é usado.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordquebrará apenas palavras longas demais para caber no contêiner (como "magazine", com 8 caracteres e o contêiner apenas com 6 caracteres). Ele nunca quebrará as palavras que poderiam caber no contêiner por inteiro, mas as empurrará para uma nova linha.

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

word-break:break-all :

para continuar na borda e, em seguida, quebre a nova linha.

word-wrap:break-word :

No início, a quebra automática de linha na nova linha e depois a borda.

Exemplo:

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

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

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

A partir das respectivas especificações do W3 - que são bastante pouco claras devido à falta de contexto - pode-se deduzir o seguinte:

• word-break: break-all é para separar palavras estrangeiras não CJK (digamos ocidentais) em escritos de caracteres CJK (chinês, japonês ou coreano).
• word-wrap: break-word é para quebra de palavras em um idioma não misto (digamos apenas ocidental).

Pelo menos, essas eram as intenções do W3. O que realmente aconteceu foi uma grande confusão com incompatibilidades do navegador como resultado. Aqui está uma excelente descrição dos vários problemas envolvidos .

O seguinte snippet de código pode servir como um resumo de como obter quebra de linha usando CSS em um ambiente de navegador cruzado:

-ms-word-break: break-all;
 word-break: break-all;

 /* Non standard for webkit */
 word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

Além dos comentários anteriores, o suporte ao navegador para word-wrapparece ser um pouco melhor do que para word-break.