A overflow-wrappropriedade em CSS permite que você especifique que o navegador pode quebrar uma linha de texto dentro do elemento de destino em várias linhas em um lugar de outra forma inquebrável. Isso ajuda a evitar uma seqüência de texto excepcionalmente longa, causando problemas de layout devido ao estouro.
.example ( overflow-wrap: break-word; )Valores
normal: o padrão. O navegador quebrará as linhas de acordo com as regras normais de quebra de linha. Palavras ou strings ininterruptas não serão quebradas, mesmo que estourem o contêiner.break-word: palavras ou cadeias de caracteres que são muito grandes para caber em seu contêiner serão quebradas em um lugar arbitrário para forçar uma quebra de linha. Um caractere hífen não será inserido, mesmo se ahyphenspropriedade for usada.inherit: o elemento de destino deve herdar o valor daoverflow-wrappropriedade definida em seu pai imediato.
A demonstração abaixo tem um botão de alternância que permite alternar entre normale break-word.
Veja a demonstração Pen overflow-wrap / word-wrap de Louis Lazaris (@impressivewebs) no CodePen.
Para demonstrar o problema que overflow-wraptenta resolver, a demonstração usa uma palavra invulgarmente longa dentro de um recipiente relativamente pequeno. Ao ativar break-word, a palavra é quebrada para acomodar o pequeno espaço disponível, como se a palavra fosse várias palavras.
Uma sequência de caracteres de espaço não separáveis ( ) seria tratada da mesma maneira e também quebraria em um local apropriado.
overflow-wrapé útil quando aplicado a elementos que contêm conteúdo não moderado gerado pelo usuário (como seções de comentários). Isso pode evitar que URLs longos e outras sequências de texto ininterruptas (por exemplo, vandalismo) quebrem o layout de uma página da web.
Semelhanças com a word-breakpropriedade
overflow-wrape word-breakse comportam de maneira muito semelhante e podem ser usados para resolver problemas semelhantes. Um resumo básico da diferença, conforme explicado na especificação CSS é:
overflow-wrapgeralmente é usado para evitar problemas com strings longas, causando layouts quebrados devido ao fluxo de texto fora de um contêiner.word-breakespecifica oportunidades de quebra automática entre letras comumente associadas a idiomas como chinês, japonês e coreano (CJK).
Depois de descrever exemplos de como word-breakpodem ser usados no conteúdo CJK, a especificação diz: “Para habilitar oportunidades de pausa adicionais apenas no caso de estouro, consulte overflow-wrap“.
A partir disso, podemos presumir que word-breaké melhor usado com conteúdo diferente do inglês que requer regras específicas de quebra de palavras e que pode ser intercalado com conteúdo em inglês, embora overflow-wrapdeva ser usado para evitar layouts quebrados devido a strings longas, independentemente do idioma usado .
A word-wrappropriedade histórica
overflow-wrapé o nome padrão de seu predecessor, a word-wrappropriedade. word-wrapera originalmente um recurso exclusivo do Internet Explorer que acabou sendo compatível com todos os navegadores, apesar de não ser um padrão.
word-wrapaceita os mesmos valores overflow-wrape se comporta da mesma maneira. De acordo com a especificação, os navegadores “devem tratar word-wrapcomo um nome alternativo para a overflow-wrappropriedade, como se fosse uma abreviação de overflow-wrap“. Além disso, todos os agentes de usuário devem oferecer suporte word-wrapindefinidamente, por motivos de legado.
Ambos overflow-wrape word-wrappassarão na validação de CSS, desde que o validador esteja configurado para testar em CSS3 ou superior (atualmente o padrão).
Relacionado
- quebra de palavras
- hífens
- espaço em branco
- Tratamento de palavras longas e URLs
Mais Informações
- Quebra de linha: uma propriedade CSS3 que funciona em todos os navegadores
- Overflow Wrapping em W3C
- Discussão sobre Stack Overflow no
word-breakvs.overflow-wrap
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6,1 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 | 7,0-7,1 |
O suporte “parcial” indicado acima se deve a navegadores mais antigos que suportam, word-wrapmas não overflow-wrap. Usar ambos pode garantir compatibilidade com versões anteriores.
A versão preliminar do editor da especificação W3C inclui um novo valor chamado break-spacesque lida com sequências de caracteres de espaço em branco “preservados”. Não há suporte de navegador conhecido para esse recurso e ele não está incluído na versão de rascunho de trabalho da especificação.