Principalmente em blogs sobre desenvolvimento web – ou que não sejam, mas que precisem, eventualmente, apresentar URLs longas -, a indicação de endereços completos da internet e/ou da web geralmente se faz necessária. Mas é preciso saber como estilizar corretamente estes endereços através de regras CSS para que sua apresentação não fique “quebrada” dentro do layout feito.

Este é um artigo traduzido do original “Wrapping Long URLs and Text Content with CSS“, do blog Perishable Press, e sofreu pequenas modificações.

Para apresentar corretamente URLs longas, seqüências de texto e outros conteúdos, basta utilizar esta regra CSS em qualquer elemento em nível de bloco (por exemplo, é perfeito para tags <pre>):

Por padrão, o valor da propriedade white-space é definido como “normal”. Então, você pode ver algo como isto quando tenta “forçar” URLs longas e outras seqüências contínuas de texto:

URLs longas apresentadas corretamente com CSS: errado

Para “forçar” fragmentos de texto longos e contínuos que são “envolvidos” dentro da largura do <pre> (ou outro elemento nível de bloco, como <div> ou <p>), é necessário um valor diferente para a propriedade white-space. As opções possíveis são:

Em um mundo perfeito, nós poderíamos simplesmente usar “white-space:pre-line” dessa forma:

Embora a propriedade white-space seja, teoricamente, suportada por todos os principais navegadores, infelizmente muitos deles falham e não conseguem aplicar corretamente a propriedade para strings longos.

Diferentes navegadores farão o wrap (“quebrar” o texto) em textos longos, mas exigem valores diferentes de white-space para trabalhar. Felizmente, podemos aplicar os valores necessários para cada navegador incluindo várias declarações de white-space. Essa é exatamente a solução apresentada no código CSS mostrado no início do artigo.

URLs longas apresentadas corretamente com CSS: certo

Os comentários incluídos na solução CSS mostram qual solução se aplica a cada browser. Observe que algumas das regras são específicas de alguns navegadores (veja os prefixos específicos dos fornecedores), enquanto outros declaram valores default a partir de diferentes especificações CSS.

A estranha propriedade “word-wrap” é uma invenção da Microsoft que foi incluído no CSS3. Graças às “CSS forward compatibility guidelines”, é perfeitamente possível incluir várias instâncias da mesma propriedade. Em poucas palavras:

  • Propriedades não reconhecidas são ignoradas
  • Para várias declarações da mesma propriedade, somente a última tem validade

A solução de código apresentada neste artigo parece funcionar bem em todos os navegadores, mas ela não valida (segundo o W3C) devido à louca propriedade da Microsoft.

Para ver os conceitos aqui mostrados na prática, veja uma página de exemplo e, para uma discussão mais completa sobre a quebra automática de texto, confira o artigo Perfect Pre Tags, também do blog Perishable Press.