Word-wrap em CSS 3

Uma propriedade de CSS 3 que serve para romper as palavras que são longas demais e não cabem inteiras pela largura de uma caixa.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 30/11/09
Valorize este artigo:
Estamos dando um repasso as novidades que trará a especificação CSS 3 e neste caso vamos ver uma propriedade interessante que servirá para que certas palavras que são longas demais e não cabem na largura de uma caixa.

Como devemos saber, no modelo de caixa dos navegadores, as palavras se vão colocando em linhas para ocupar toda a largura disponível na caixa. Pode surgir um problema quando temos uma palavra muito longa, que não cabe na largura disponível do container onde se colocou. Então o que ocorre é que a palavra aparece por fora da caixa, ou inclusive pode ocorrer que a caixa se deforme de tamanho, fazendo que o elemento container amplie a largura o suficiente para que fique a palavra. Em qualquer caso, o efeito resultante costuma ser pouco agradável, porque muitas vezes nos desenquadra nosso desenho e faz com que as fiquem mal construídas.

Para evitar este efeito, em CSS 3 se incluiu um atributo chamado word-wrap que serve para especificar que as palavras que sejam longas demais se devem cortar, de maneira que caibam na largura disponível da caixa. Uma propriedade muito útil que com certeza rapidamente começará a se utilizar habitualmente.

Temos de agradecer a Microsoft a incorporação desta nova propriedade de CSS 3, já que o atributo word-wrap começou sendo uma etiqueta não padrão de CSS, que estava disponível em Internet Explorer e devido a sua utilidade, o W3C se decidiu a incorporar à nova especificação deste linguagem de estilo.

O atributo word-wrap tem dois possível valores: normal ou break-word.

word-wrap: normal;

Faz com que as palavras não se cortem, o que seria o comportamento normal que conhecíamos até agora, ocorrendo que as palavras longas nos possam desenquadrar nosso desenho.

Agora podemos ver uma caixa que tinha uma largura de 300 px e que por culpa de uma palavra muito longa se deforma a caixa ou o texto aparece por fora.

Este texto entra bem na camada, porém agora vamos colocar uma palavra longa demais que não caberá, por isso nos desenquadraria o desenho: wieiisiddjasddjkjasdasdsadfdsfsdfsfsdfsdsdfsdfkaldkadadsadadadadsad. Esta camada tem 300 pixels de largura e essa palavra, portanto não cabia e me desenquadra tudo.

word-wrap: break-word;

Com este outro valor de word-wrap: break-word, o que conseguimos é que a palavra se recorte, para caber na largura que havíamos definido.

Este atributo por agora é suportado por Internet Explorer, Safari e Google Chrome. Firefox parece que a incluirá a partir de sua versão 3.1, que não foi lançada ainda no momento de escrever este artigo de CriarWeb.com.

Agora vejamos uma caixa onde colocamos o atributo para que recorte as palavras:

Esta outra camada tem o atributo word-wrap: break-word e portanto vai recortar a seguinte palavra para que fique bem na caixa: wieiisiddjasddjkjasdasdsadfdsfsdfsfsdfsdsdfsdfkaldkadadsadadadadsad. Agora a camada não se vê afetada por uma palavra tão longa.





Manual: CSS 3

Comentários do artigo
Foram enviados 4 comentários ao artigo
4 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato