# URLs longas apresentadas corretamente com CSS

> URLs longas apresentadas corretamente com CSS puro. Quebra de linha inteligente, overflow e técnicas para exibir links grandes adequadamente. Resolva!

URL: https://dpw.dev/css/urls-longas-apresentadas-corretamente-com-css/  
Publicado em: 2010-10-25  
Categoria: css  
Tags: layout  
Autor: Tárcio Zemel

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.

> Artigo baseado em [Wrapping Long URLs and Text Content with CSS](http://perishablepress.com/press/2010/06/01/wrapping-content/).

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](http://htmlhelp.com/reference/html40/block.html) (por exemplo, é perfeito para tags ``<pre>``):

```scss
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](http://www.w3.org/TR/CSS21/text.html#white-space-prop) é 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](/images/blog/urls-longas-apresentadas-corretamente-com-css/urls-longas-apresentadas-corretamente-com-css-errado.gif)

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:

```scss
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.

![URLs longas apresentadas corretamente com CSS: certo](/images/blog/urls-longas-apresentadas-corretamente-com-css/urls-longas-apresentadas-corretamente-com-css-certo.gif)

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](http://www.w3.org/)) devido à louca propriedade da Microsoft.

Para ver os conceitos aqui mostrados na prática, veja uma [página de exemplo](http://perishablepress.com/press/wp-content/online/demos/css-wrap-demo.html) e, para uma discussão mais completa sobre a quebra automática de texto, confira o artigo [Perfect Pre Tags](http://perishablepress.com/press/2009/11/09/perfect-pre-tags/), também do blog [Perishable Press](http://perishablepress.com/).

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml