Warning: Creating default object from empty value in /home/lucianosimas/www/blog/wp-content/plugins/paginated-comments/paginated-comments.php on line 37
Quebrar palavra com css http://www.lucianosimas.com.br/blog/wp-content/themes/wordpress-brown
01/10

Quebrar palavra com css

16

quebrar palavra com cssQuando 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
deixe seu comentário

Artigos Relacionados

16 Comentários para “Quebrar palavra com css”

  1. 1
    eduardo Comenta:

    obrigado pela dica!

  2. 2
    helcio Comenta:

    Este valor word-warp funciona somente no firefox. Como faço em outros navegadores?

  3. 3
    Luciano Simas Comenta:

    Olá Helcio, testei no IE 7, 8 e no Chrome o código funcionou a palavra não ultrapassa a largura da div.

  4. 4
    Nara Comenta:

    Muito obrigada :)
    Funcionou perfeitamente!

  5. 5
    herick Comenta:

    dica simples mais que nem todo mundo conhece, muito boa,me ajudo bastante!!

  6. 6
    ailson Comenta:

    Cara tava me matando, e este poste me salvou

  7. 7
    Gilberto Comenta:

    Poxa mano, valeu mesmo pela dica, me ajudou muito.

  8. 8
    EnigmA Comenta:

    Dica fantástica valeu! não conhecia ainda

  9. 9
    rodney Comenta:

    Olá amigo, realmente funciona com o exemplo acima mas se inserirmos kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk ai quebra o layuot.

    Você saberia como resolver isso?

  10. 10
    rodney Comenta:

    opa amigo, desculpe por quebrar seu layout mas era só para demonstrar não sabia que tinha este mesmo problema.

    Desculpe-me!!!

  11. 11
    Dimas Budie Comenta:

    Muito boa a dica.
    Ajudou bastante..
    Obrigado

  12. 12
    Luciano Braga Comenta:

    Ótima Dica!!
    Valeu!!

  13. 13
    Hiury Comenta:

    Valeu mano, ajudou e muito :p

  14. 14
    Cledimir Comenta:

    Muito boa dica! obrigado!

  15. 15
    anderson gomes Comenta:

    style=”word-wrap:break-word
    Não funciona com bootstrap

  16. 16
    Darlan Chaves Comenta:

    Muito Obrigado, já faz um bom tempo que procuro isso. Deus te abençoe!

Deixe sua opinião, informação ou dúvida sobre o assunto

Comentar