Quebrou A Cara Letra

Como lidar quando o texto quebra em layouts responsivos

O problema de quebrar a cara letra aparece com frequência em projetos de web design que tentam forçar o texto a se comportar de maneira que o browser não consegue calcular. Você coloca um container com largura fixa, aplica overflow:hidden e espera que o texto caia numa quebra de linha bonita. O resultado é quase sempre uma palavra cortada pelo meio ou um bloco que vaza do container e estraga todo o alinhamento da página. Isso já me aconteceu na terceira semana de um projeto de e-commerce, quando precisei fazer um grid de produtos onde cada card tinha altura variável mas o título do produto precisava aparecer sempre inteiro.

A técnica de quebrou a cara letra na prática

A primeira coisa que todo mundo tenta é usar text-overflow: ellipsis ou truncar manualmente com JavaScript. Isso resolve para uma linha, mas falha completamente quando o texto tem múltiplas linhas e você precisa manter a legibilidade. O que funciona de verdade envolve combinar duas propriedades CSS que poucas pessoas usam juntas: hyphens e word-break. Eu configurei o seguinte:

container {
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  break-word: anywhere;
}

Isso resolve 90% dos casos. O hyphens:auto faz o browser inserir hifens nos pontos corretos de separação silábica em português. O word-break:break-word permite que palavras longas sem hífen natural sejam quebradas no meio. O overflow-wrap:break-word é o fallback para navegadores mais antigos. Eu mantive os três por segurança, mas na prática só os dois primeiros eram necessários para o Chrome e Firefox atuais. O problema que ninguém conta é com palavras sem espaço. Links longos, hashes, strings geradas automaticamente — esses não obedecem às regras normais de quebra. Eu tive um caso específico num painel administrativo onde os usuários podiam colar URLs arbitrárias dentro de campos de texto que eram exibidos em cards com layout flexbox. A URL inteira ignorava qualquer quebra e empurrava todo o card para a direita, quebrando o grid inteiro. A solução foi aplicar max-width:0 e min-width:0 no elemento pai, junto com word-break:break-all, que força a quebra em qualquer caractere. Parece uma gambiarra, mas funciona. Eu testei isso em Chrome, Firefox, Safari e Edge antes de subir pra produção. Outra coisa que as pessoas esquecem é a diferença entre break-word e anywhere. O break-word só quebra quando a palavra não cabe no espaço disponível. O anywhere quebra em qualquer ponto, o que é útil para strings técnicas mas ruim para texto normal porque pode separar sílabas de formas estranhas. Se você está trabalhando com conteúdo editorial, use break-word. Se é dado estruturado ou strings de sistema, anywhera é mais seguro.

O que acontece quando isso falha

Existem cenários onde nenhuma configuração CSS resolve. O principal é quando o tipo de letra que você está usando não tem os glifos de separação silábica em português. Fontes OTF mais antigas, especialmente as importadas de mercados europeus orientais, frequentemente não incluem as marcas de hifenização. Nesses casos, o hyphens:auto simplesmente não faz nada e o texto continua vaziando. A solução menos dolorosa é usar uma fonte que tenha suporte completo a ligaduras e separação silábica — fontes como Source Sans Pro, Open Sans ou a família do Google Noto têm esse suporte construído. Se você não pode trocar a fonte, o workaround é aplicar um pré-processamento em JavaScript que insere hifens manualmente nos pontos de separação silábica antes de renderizar. Não é elegante, mas evita que o layout quebre. Outro caso limite é o de textos bilíngues com palavras compostas. Eu lidava com um projeto que misturava português e inglês, e palavras como "state-of-the-art" ou "e-commerce" causavam problemas porque o browser tentava quebrar antes do hífen em vez de tratá-lo como parte da palavra. A regra CSS hyphens:none aplicada apenas a essas palavras específicas resolveu. Eu isolei com um seletor de atributo no CSS e apliquei a exceção. Foi necessário porque a quebra automática em hífens criava visualmente algo pior do que a palavra transbordando. A questão mais chata é com fontes iconográficas ou customizadas que substituem caracteres por símbolos. Se o seu texto contém caracteres que estão mapeados para glyphs diferentes na fonte, o browser pode calcular a largura de forma incorreta e fazer a quebra no lugar errado. Já vi isso acontecer com bibliotecas como Font Awesome embutidas em texto normal — o caractere de emoji ou símbolo ocupava espaço visualmente diferente do calculado, e o texto quebrava uns dois caracteres antes do ponto esperado. A correção foi aplicar font-feature-settings para desativar as substituições de glyph no contexto de quebra de texto, mas isso depende do navegador. Em alguns casos, a única saída era remover o ícone do fluxo de texto e reposicioná-lo com um pseudo-elemento absoluto.

Alternativas quando o texto simplesmente não obedece

Se você já tentou tudo acima e o texto continua quebrando de forma imprevisível, o problema provavelmente não é CSS. Pode ser o container ter uma propriedade transform ou contain que altera o contexto de formatação de bloco. Nesses casos, isolar o texto em um elemento separado, fora da árvore de transformação, costuma resolver. Isso é chato porque exige reorganizar a estrutura HTML, mas é mais confiável do que brigar com especificidades CSS. Também vale considerar que há situações onde truncar o texto propositalmente é a escolha certa. Em grids de produtos, listas de resultados, cards de feed — o usuário não precisa ler o texto inteiro de primeira. Um clamp() com display:-webkit-box e -webkit-line-clamp:2 mostra exatamente duas linhas e corta o resto com ellipsis. Isso é previsível, não quebra o layout e funciona em praticamente todos os navegadores modernos. Eu prefiro essa abordagem em interfaces onde o texto truncated leva a uma página de detalhes, do que tentar forçar o texto a caber onde ele não cabe naturalmente.