Qual é a diferença entre "word-break: break-all" versus "word-wrap: break-word" em CSS


397

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?

Respostas:


215

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.


28
Observe também que quebra de linha é um nome legado para a propriedade mais recente "quebra de transbordamento" na especificação. w3.org/TR/css3-text/#overflow-wrap
squareman

12
Simplificando: " word-breakespecifica oportunidades de quebra automática de linha entre letras ..." A especificação do W3C usa o texto CLK como exemplo , mas esse não é o único uso pretendido. É comum usar word-breakem conjunto com cadeias longas (como URLs ou linhas de código) quando você deseja que elas quebrem na largura do contêiner - especialmente se o contêiner for um preelemento ou célula da tabela em que a word-wrappropriedade pode não funcionar conforme o esperado .
Gfullam

11
Como as especificações usam apenas os idiomas asiáticos como exemplo, não como o único objetivo pretendido da propriedade (como descrito também por gfullam), que parece ser a principal conclusão dessa resposta.
Shikkediel 28/09

3
word-wrap: break-word -> Tabela da ruptura não vai ---- palavra-break: break-all -> breaks tabelas
Fernando Silva

11
Note que o link W3C que @squareman mencionado é agora w3.org/TR/css-text-3/#overflow-wrap-property
Charles Wood

409

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.


28
Por que isso não é aceito? Esta resposta é mais útil para a maioria dos usuários. O comportamento do CJK se aplica apenas a sites muito internacionais.
MarioDS

3
Resposta curta, mas doce! Embora você queira alterar a quebra de linha para quebra de excesso?
Gaurav Agarwal

5
@MarioDS se aplica a "sites muito internacionais" ou, como 20% do mundo chama-los, "sites"
fregante

11
@GauravAgarwal: deve-se notar que o IE (mesmo na versão mais recente) ainda depende do nome do legado. Veja caniuse.com/#search=overflow-wrap
Felix Wienberg

2
O símbolo "resposta aceita" está relacionado apenas ao solicitante, relevante para a correção da resposta quando ela era relevante para ela naquele momento, só isso. Não é esperado que os usuários voltem às suas perguntas após alguns anos e analisem novas respostas. Os votos contados na resposta mostram à comunidade "resposta aceita".
9788 elpddev #

98

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.

2
Este ainda é o caso se você usar break-word. Eu achei irritantemente que word-breakquebra urls, mas não word-wrap. Ambos usando break-wordtem que partir css-tricks.com/snippets/css/...
Karthik T

44

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.

4
Excelente explicação. Um exemplo que encontrei agora: palavras longas em uma célula da tabela. overflow-wrapEu word-wrapnão os fiz embrulhar. Presumivelmente, porque as células da tabela sem largura fixa se expandem em vez de estourarem. Em vez disso, a mesa ficou ampla e colidiu com outros elementos. word-breakpor outro lado, consertou.
Henrik N

@HenrikN table-layout: fixed;(possivelmente junto com width/ max-width) pode fazê-lo funcionar, overflow-wrap/word-wrapmas depende do caso de uso específico; assim como word-breakpode não ser o que você deseja.
Php 18/08

42

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.

insira a descrição da imagem aqui

demonstração do jsfiddle .


5
Você pode usar table-layout:fixedpara fazer com que a tabela não se expanda ao usarword-wrap:break-work
veksen

@vesken Não consegui fazer isso funcionar (no Firefox 26). Você poderia fornecer uma versão atualizada do meu jsfiddle vinculado acima para demonstrar o que você quer dizer?
Jon Schneider

3
Consegui fazê-lo adicionando uma largura na tabela, 100%, ou movendo a largura de 80 px do contêiner para a tabela. jsfiddle.net/SDGAX/37 O comportamento da tabela, no entanto, não é o mesmo usandotable-layout:fixed
veksen

2
Esse comportamento também ocorre quando usado word-wrapem conjunto com pretags no Firefox, a menos que elas tenham uma largura fixa definida. Usar word-breakproduz o resultado desejado. Vinculei a esta resposta em um comentário postado acima porque demonstra um caso de uso comum.
Gfullam

Também os elementos de exibição em linha sem largura não são afetados pelo "quebra de linha", mas a "quebra de palavra" ainda funciona.
tfE 26/01

22

É 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.


Obrigado por isso como eu estava olhando para a diferença entre word-wrape word-breakque tanto pode ter o valorbreak-word
Chad

10

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


Muito bem explicado. O exemplo mostra a diferença muito clara. Esta deve ser a resposta aceita!
naitsirch 29/04

9

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>


8

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;

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.