URLs longas apresentadas corretamente com CSS

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>):

pre {
white-space: pre;           /* CSS 2.0 */
white-space: pre-wrap;      /* CSS 2.1 */
white-space: pre-line;      /* CSS 3.0 */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap;  /* HP Printers */
word-wrap: break-word;      /* IE 5+ */
}

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:

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:

pre {
white-space: pre-line;
width: 300px;
}

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.

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.