Dominando quebras de linha pelo CSS
Irei mostrar duas tags para bricarmos com as quebras de linha: White-Space e Display.
Tag White-Space
A primeira é a responsável pelo tratamento dos espaços em brancos, a tag White-Space, essa tag pode ser usada da seguinte forma:
| Valor | Descrição |
|---|---|
| normal | Os espaços em branco serão ignorados pelo browser. |
| nowrap | O texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag <br> |
| pre | Os espaços em branco serão preservados pelo browser. |
| pre-line | Os espaços em branco serão ignorados pelo browser e o texto será quebrado quando necessário. |
| pre-wrap | Os espaços em branco serão preservados pelo browser e o texto será quebrado quando necessário. |
| inherit | Será herdado as características do elemento pai. |
O melhor mesmo é testar e ver os resultados. Exemplo de uso:
Tag Display
Outra forma interessante de manipular a quebra de linha ou não de um elemento é utilizar a tag display. Quando usamos a tag div percebemos que automaticamente há uma quebra de linha enquanto um span não acontece. Podemos dizer que na tag div está incluso a propriedade display: block enquanto a span está o display: in-line.
Depois irei explicar melhor as outras propriedades do display.
Posts Relacionados:
Comentários
Ronildo Costa escreveu em 20/04/2010 as 19:59:58
Muito bom Leo... parabéns.
Mas a tag display é mais do que apenas uma quebra de linha. É forma como o elemento se comporta.
ps: Muda a cor da fonte aqui na caixa do comentário, preto fica díficil pegar a leitura.
Leo Miranda escreveu em 21/04/2010 as 00:24:52
Com certeza Roni, depois irei falar mais sobre a tag display, nesse artigo quis apenas mostrar ela como função de quebra de linha. Abraço
Rodrigo escreveu em 25/05/2010 as 16:56:51
Ok. Mas como eu concerto isso? "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
Leo Miranda escreveu em 25/05/2010 as 17:26:20
Opa Rodrigo, se quiser brincar um pouco tem essa solução http://elmicox.blogspot.com/2006/05/script-quebra-de-palavras-word-wrap-no.html se não tiver paciência faça o que eu fiz:
overflow: hidden;
Rodrigo escreveu em 25/05/2010 as 18:10:48
Valeu cara. Usei o Overflow mesmo, como so tive problema com o IE6 usei o _overflow:hidden;
carlos escreveu em 26/06/2012 as 21:47:26
kk
Edson Moreira escreveu em 15/08/2012 as 22:00:33
Perfeito. O white-space que eu não conhecia resolveu o meu problema. Obrigado e parabéns pelo blog.
Raul escreveu em 30/08/2012 as 12:26:17
O word-wrap: break-word;
resolve isso: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
Vivi escreveu em 29/01/2013 as 14:16:28
Ótimo assim posso digitar e saber que os espaços permaneceram!
Obrigada!
re escreveu em 01/02/2013 as 13:43:59
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Leo Miranda escreveu em 01/02/2013 as 13:53:31
Há! Não quebra! :D
Participe! Escreva um comentário...
Joomla!.