CloudWare

cafelog-coffee

A Propriedade Word-Wrap

Quinta, 18 Agosto 2011

Saiba o que essa propriedade pode fazer por você.

css3

Você já deve ter percebido alguma vez que certas palavras que são longas demais e não cabem na largura de uma div, por exemplo, "vazam" e acabam, de certa forma, desmontando o layout do site. A propriedade word-wrap resolve muito bem esse problema. Confira a seguinte situação:

Observe a div que será gerada com o seguinte código e um conteúdo qualquer:

.exemplo1 {
 border: 1px solid;
 width: 100px;
 height: 150px;
}

AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCC DDDDDDDDDDDDDDDDDDDD

Viu como algumas palavras vazaram? Agora observe o código abaixo utilizando a propriedade word-wrap:

.exemplo2 {
 border: 1px solid;
 width: 100px;
 height: 150px;
 word-wrap: break-word;
}

AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCC DDDDDDDDDDDDDDDDDDDD

Problema resolvido? Então até a próxima!

Android

Java

Hibernate

Joomla!

CSS3

HTML5

Saia na Frente

html5 css3

Sobre Mim

sobre-foto-2Adriel Café é Web Master e Desenvolvedor Java. Ele incentiva o uso/estudo de Web Standards, Java e Android.

Saiba Mais

Encontre-me

facebook linkedin