Impeça que os Títulos Quebrem no Lugar Errado

Um título que quebra depois de uma palavra curta, uma única palavra isolada na última linha e uma URL longa que alarga o seu contentor são três defeitos diferentes, e cada um deles geralmente exige uma correção distinta em CSS ou HTML.

Eles também partilham uma característica irritante: só existem em determinadas larguras de contentor. O designer faz uma captura de ecrã do título partido num telemóvel de 384px, você abre a página na largura do seu desktop e está tudo bem. As más quebras tendem a viver em faixas estreitas de viewport que ninguém testou, e é por isso que assistir a session replays nas larguras que os utilizadores reais efetivamente usaram é muitas vezes a forma mais rápida de ver o defeito tal como aconteceu.

Este artigo percorre cada problema visível, a ferramenta que o resolve e o raciocínio que ajuda a escolher a certa da próxima vez.

Como Proibir uma Quebra num Ponto Específico?

Para impedir que o browser quebre a linha num ponto específico, troque o carácter quebrável pelo seu equivalente não quebrável. Um espaço não quebrável ( , U+00A0) mantém duas palavras na mesma linha ao substituir o espaço comum entre elas por um em que o browser não está autorizado a quebrar. É essa a solução para um título que quebra logo a seguir a “de” ou que deixa o nome de um produto dividido entre linhas.

O texto também pode quebrar onde não há espaço, mais frequentemente depois de um hífen. O word joiner (U+2060, escrito como a referência nomeada ⁠, sensível a maiúsculas e minúsculas) proíbe uma quebra sem acrescentar qualquer largura, e o hífen não quebrável (U+2011, ‑, que não tem entidade nomeada) apresenta um hífen que não pode tornar-se num ponto de quebra:

<h2>Shipping the new editor to&nbsp;everyone</h2>
<p>Take the exit for I&#8209;95 north.</p>

Como Permitir uma Quebra num Ponto Específico?

O problema espelhado é uma string longa que quer quebrar, mas apenas em pontos à sua escolha. Inserir um elemento <wbr> oferece ao browser um local adicional para terminar uma linha, e nada visível é inserido se a quebra for utilizada. O hífen suave ­ (U+00AD) marca o mesmo tipo de oportunidade, mas apresenta um hífen quando a quebra ocorre; até lá permanece invisível. Funciona com o valor por omissão hyphens: manual, pelo que só falha se algo tiver definido hyphens: none.

<p>https://docs.example.com<wbr>/reference<wbr>/text-wrapping</p>
<p>The rise of hyper&shy;modularization</p>

Use <wbr> para URLs e identificadores apresentados no ecrã, e ­ para palavras reais.

Strings Longas Inquebráveis: overflow-wrap: anywhere

Para conteúdo gerado pelos utilizadores, URLs longas e tokens que não pode anotar manualmente, defina overflow-wrap: anywhere e deixe o browser quebrar como último recurso. O detalhe crítico é o dimensionamento intrínseco. Ambos os valores permitem que o browser divida uma palavra longa, mas apenas anywhere faz com que esses pontos de quebra de emergência contem para a largura min-content do elemento; break-word mantém essa largura igual ao comprimento da string inteira, sem quebras. É por isso que um item flex que contém uma URL longa pode continuar a recusar encolher e a rebentar com o layout sob break-word, mas encolhe corretamente sob anywhere. O CSS Text Level 4 define os dois valores de forma idêntica exceto nesta única diferença — e é precisamente essa a diferença com que as pessoas realmente se deparam.

.card { display: flex; gap: 1rem; }
.card-body {
  /* break-word leaves min-content at the full URL width */
  overflow-wrap: anywhere;
}

O valor anywhere funciona em todos os motores modernos, tendo o Safari sido o último a suportá-lo na versão 15.4 (março de 2022). Bases de código mais antigas transportam por vezes o obsoleto word-break: break-word, que acaba por quebrar exatamente como overflow-wrap: anywhere, deixando o próprio word-break com o seu comportamento normal. Substitua-o.

Onde se Encaixa o word-break: break-all?

O word-break: break-all coloca a quebra onde quer que a linha fique sem espaço, mesmo a meio de uma palavra. Não acrescenta qualquer hífen e não move uma palavra inteira para a linha seguinte de forma a mantê-la intacta, pelo que a prosa comum acaba cortada no fim de cada linha. Isso torna-o a ferramenta errada para prosa e a ferramenta certa para strings em que os limites entre palavras não têm significado: hashes de commits, chaves de API, tokens em células de tabela. O seu valor keep-all serve a necessidade oposta em CJK, suprimindo quebras entre caracteres.

.commit-hash {
  font-family: monospace;
  word-break: break-all; /* never on prose */
}

Colunas Estreitas: hyphens: auto Mais um Atributo lang

Quando uma coluna estreita força quebras a meio das palavras, um ponto de hifenização correto segundo o dicionário lê-se muito melhor do que um corte à bruta. O hyphens: auto não faz nada a menos que o elemento ou um dos seus ascendentes tenha um atributo lang. Cada língua divide as palavras à sua maneira, por isso o browser precisa de saber qual consultar antes de poder hifenizar. A propriedade tem estatuto Baseline Widely available, funcionando sem prefixos em todos os browsers desde setembro de 2023.

<aside lang="en" class="sidebar-note">Uncharacteristically long words wrap cleanly here.</aside>

.sidebar-note { hyphens: auto; }

Títulos e Parágrafos: text-wrap balance e pretty

Para uma palavra sozinha na última linha de um título, o text-wrap: balance uniformiza o comprimento das linhas escolhendo de forma diferente entre os pontos de quebra já existentes na linha; não cria pontos novos e não redimensiona a caixa do elemento, pelo que um título equilibrado mantém a sua largura original. O balanceamento é dispendioso, por isso os browsers limitam-no: o Chromium para às seis linhas, o Firefox às dez, e blocos mais longos quebram normalmente. O text-wrap: pretty destina-se ao corpo de texto, investindo mais esforço de layout para evitar órfãs; é suportado no Chromium e no Safari, que o lançou na versão 26, mas ainda não no Firefox. A própria propriedade text-wrap funciona nas versões mais recentes dos browsers desde março de 2024.

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

Referência Problema-Ferramenta

O padrão por detrás de todo este conjunto de ferramentas: identifique se o defeito exige uma quebra proibida, uma quebra permitida ou uma estratégia global de quebra de linha, e depois aplique a ferramenta mais restrita que o resolva. Uma base sensata é overflow-wrap: anywhere nos contentores que albergam conteúdo de utilizadores, balance nos títulos e pretty nos parágrafos; guarde as entidades ao nível do carácter para as quebras individuais que um designer sinalize depois disso.

Perguntas Frequentes

Qual é a diferença entre overflow-wrap e word-break?

O overflow-wrap só entra em ação quando uma palavra é demasiado longa para caber sozinha numa linha, e todo o resto quebra normalmente. O word-break: break-all altera a estratégia para o elemento inteiro e divide uma palavra onde quer que a linha fique sem espaço. Use overflow-wrap: anywhere para URLs longas ocasionais dentro de prosa normal, e word-break: break-all apenas para hashes e tokens em que os limites entre palavras não têm significado.

word-wrap é o mesmo que overflow-wrap?

Sim. A propriedade começou como uma extensão da Microsoft chamada word-wrap, adotou mais tarde o nome padrão overflow-wrap, e os browsers continuam a aceitar o nome antigo como alias do novo. Escreva overflow-wrap em código novo; os browsers atuais não precisam de word-wrap como fallback, e as folhas de estilo que declaram ambos estão simplesmente a definir a mesma propriedade duas vezes.

Quando devo usar um espaço de largura zero em vez do elemento wbr?

Use o espaço de largura zero (U+200B, escrito como a referência ​) quando só puder modificar a própria string, como conteúdo armazenado num CMS ou devolvido por uma API, e use o elemento wbr quando controla o HTML. O espaço de largura zero é um carácter invisível que permanece no texto, pelo que viaja com o copiar e colar e pode interferir com pesquisas por correspondência exata.

O que acontece nos browsers que não suportam text-wrap: pretty?

A declaração é simplesmente ignorada e o texto quebra com o algoritmo linha a linha por omissão, pelo que nada se estraga visualmente. O CSS descarta declarações cujos valores não reconhece, o que torna text-wrap: pretty e text-wrap: balance melhorias progressivas seguras: os browsers que as suportam obtêm melhores quebras de linha, e todos os outros renderizam exatamente como antes. Não é necessária qualquer feature query ou declaração de fallback.