URLs longas apresentadas corretamente com CSS

Apresentar corretamente URLs e outros textos longos é essencial para um layout consistente e de qualidade. Saiba como fazer isso lendo este artigo!

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:

  • normal. O valor padrão para a propriedade white-space. Sequências de espaços em branco são “recolhidos” a um único espaço em branco. O conteúdo de <pre> irá se adequar à largura do elemento.
  • nowrap. Sequências de espaços em branco são recolhidos a um único espaço em branco. Os conteúdos de <pre> pulam de linha SOMENTE em elementos com <br />.
  • pre. Todos os espaços em branco são preservados e o conteúdo de <pre> irá pular de linha de forma implícita. Esse é o comportamento padrão do elemento <pre>.
  • pre-line. Sequências de espaços em branco se recolhem a um único espaço em branco; o conteúdo de <pre> irá dar wrap em espaços em branco e quebras de linha acontecem de acordo com a largura do elemento.
  • pre-wrap. Todos os espaços em branco são preservados e o conteúdo de <pre> irá se comportar de acordo com os espaços em branco e quebras de linha de acordo com a largura do elemento.
  • inherit. Valor de white-space herdado do elemento pai.

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.