Quando determinamos a largura de uma DIV e o conteúdo desta DIV possuir uma palavra longa, esta ultrapassa o limite da DIV. Este caso é visto mais frequente quanto temos o endereço de um site dentro de uma DIV que tem uma largura pequena.
Podemos fazer com esta palavra se quebre para se ajustar dentro da DIV. A solução é usar o atributo word-wrap.
O word-wrap, tem dois valores: normal ou break-word
O normal é o padrão default de um conteúdo dentro de uma DIV, as palavras não são cortadas.
Aqui está o conteúdo dentro da DIV que tem a largura de 200px. Agora aparecerá uma palavra grande para as dimensões desta DIV. DESINSTITUCIONALIZAÇÃO. Outro exemplo: http://www.lucianosimas.com.br
O valor break-word faz com que a palavra se quebre no limite da DIV e continua na linha de baixo, não ultrapassando assim o limite da largura da DIV.
<style type="text/css"> <!-- div{ width:200px; word-wrap: break-word; border:1px solid #000000; } --> </style>
Aqui está o conteúdo dentro da DIV que tem a largura de 200px. Agora aparecerá uma palavra grande para as dimensões desta DIV. DESINSTITUCIONALIZAÇÃO. Outro exemplo: http://www.lucianosimas.com.br
obrigado pela dica!
Este valor word-warp funciona somente no firefox. Como faço em outros navegadores?
Olá Helcio, testei no IE 7, 8 e no Chrome o código funcionou a palavra não ultrapassa a largura da div.
Muito obrigada 🙂
Funcionou perfeitamente!
dica simples mais que nem todo mundo conhece, muito boa,me ajudo bastante!!
Cara tava me matando, e este poste me salvou
Poxa mano, valeu mesmo pela dica, me ajudou muito.
Dica fantástica valeu! não conhecia ainda
Olá amigo, realmente funciona com o exemplo acima mas se inserirmos kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk ai quebra o layuot.
Você saberia como resolver isso?
opa amigo, desculpe por quebrar seu layout mas era só para demonstrar não sabia que tinha este mesmo problema.
Desculpe-me!!!
Muito boa a dica.
Ajudou bastante..
Obrigado
Ótima Dica!!
Valeu!!
Valeu mano, ajudou e muito :p
Muito boa dica! obrigado!
style=”word-wrap:break-word
Não funciona com bootstrap
Muito Obrigado, já faz um bom tempo que procuro isso. Deus te abençoe!