http://www.lucianosimas.com.br/blog/wp-content/themes/wordpress-brown
01/10

Quebrar palavra com css

15

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

15 Comentários para “Quebrar palavra com css”

Páginas: [1] 2 3 » Mostar todos comentários

  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!!

Páginas: [1] 2 3 » Mostar todos comentários

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

Comentar