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.
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>):
|
1 2 3 4 5 6 7 8 9 10 |
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:
|
1 2 3 4 |
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.