19.03.2025

Quebrando Strings Longas Sem Espaços em HTML e XUL: CSS

Resposta Rápida

Para conseguir que quebras de linha ocorram em strings longas em HTML sem espaços, utilize a propriedade CSS overflow-wrap: break-word;:

.wrap-it {
  overflow-wrap: break-word; /* Uma maneira confiável para palavras longas */
}

Ao aplicar isso a um elemento onde você precisa da quebra de linha, atribua a classe wrap-it:

<div class="wrap-it">umalongastringsemespaços...</div>

Com esse método, o texto longo será quebrado adequadamente e se ajustará aos limites do contêiner.

Explorando o Envoltório de Texto

Sem espaços? Sem problemas! Utilize overflow-wrap: break-word; para lidar com essas situações. Para controlar onde ocorre a quebra em elementos de bloco como <div> ou <p>, defina uma largura fixa ou largura máxima max-width:

.wrap-it {
  overflow-wrap: break-word;
  width: 200px; /* Não há necessidade do texto ocupar toda a tela! */
}

Espaço Zero: Os Caracteres de Quebra Secretos

Você pode usar um espaço zero (​) em certas partes da sua string para indicar ao navegador onde quebrar o texto sem alterar o conteúdo:

<div class="wrap-it">
  ATCG&#8203;GGTA&#8203;CCAT&#8203;... /* Código sob análise */
</div>

Propriedade White-space: Gerenciando Quebras com Espaços

Para controle preciso sobre como os espaços são tratados no texto, as propriedades white-space são úteis. Por exemplo, white-space: pre-wrap; preservará o formato do texto original, o que é importante para código ou poesia. pre-line ou break-all oferecem várias opções de quebra.

Overflow: Esconder ou Rolar?

Às vezes, um simples envoltório não é suficiente. Combinar overflow: auto; com uma largura limitante impedirá que o conteúdo transborde do contêiner enquanto mantém seu layout intacto. Se necessário, as barras de rolagem aparecerão:

.neat-and-clean {
  overflow: auto;
  width: 100%; /* Defina limites para o texto */
}

Visualização

Imagine uma string como um trem de carga longo (🚂) que precisa passar por um túnel (seu contêiner):

Trem: 🚂[AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA]

Mas o túnel só pode acomodar um número menor de vagões:

Túnel: 🚇[AAAAA]

Nesse caso, overflow-wrap: break-word; atua como um sinal de parada:

.wrap-it {
  word-wrap: break-word; /* A versão CSS de "Trem, pare!" do Gandalf */
}

E assim, o trem passa pelo túnel em partes:

Túnel: 🚇[AAAAA]
        🚇[AAAAA]
        🚇[AAAAA]
        ...

Assim, uma string longa sem espaços é envolvida como vagões de trem de carga.

Compatibilidade Entre Navegadores

overflow-wrap: break-word; funciona bem, mas pode se comportar de forma ligeiramente diferente em diferentes navegadores. Realize testes para garantir uma saída consistente entre os vários navegadores. O que funciona no Chrome pode ser exibido de maneira diferente no Safari.

Estilização em CSS: Externa vs. Inline

CSS externo é preferível para estilização. Estilos inline complicam o suporte e a atualização do código, bem como a localização de erros. Torne sua vida mais fácil usando classes externas:

.break-style {
  word-wrap: break-word; /* "Palavras difíceis? Eu cuido disso!" */
}

Quebras Suaves: Uma Maneira Refinada de Quebrar Linhas

Para um envoltório de texto extremamente limpo, pode-se utilizar hífens suaves do HTML (­). No entanto, tenha cuidado – o suporte a eles varia entre os navegadores:

<div class="wrap-it">
  Um&shy;ex&shy;em&shy;plo&shy;destringcomhífen&shy;suave... /* Quebra suave em andamento */
</div>

Não esqueça de testar em diferentes navegadores. O Firefox e o Safari podem lidar com eles de forma diferente do que se esperava.

Recursos Úteis

1. word-break - CSS: Cascading Style Sheets | MDN — Insights abrangentes sobre o uso de word-break.
2. Propriedade overflow-wrap em CSS - W3Schools — Tudo que você precisa saber sobre overflow-wrap.
3. Posso usar... Tabelas de suporte para HTML5, CSS3, etc. — Informações sobre compatibilidade e suporte para word-break.
4. Lidando com Palavras Longas em CSS - Justmarkup — Entendendo métodos para trabalhar com palavras longas usando CSS.
5. overflow-wrap | CSS-Tricks — Conhecendo overflow-wrap e suas funcionalidades.
6. Propriedade word-wrap em CSS - W3Schools — Um guia para usar word-wrap para melhorar a legibilidade do texto.

Video

Navigation