O CSS3 tem uma propriedade bem interessante para se trabalhar com a divisão de textos em mais de uma coluna. Você não vai mais precisar criar códigos Javascript para dividir seus textos, basta seguir as ficas abaixo!
Para testar, crie uma div de tamanho qualquer e insira um texto qualquer aleatório. Para essa div, crie uma classe CSS e defina um valor de largura não muito grande, para que você possa ver o resultado. O atributo CSS3 que trabalha com a divisão é o column-count, que recebe como valor o número de colunas nas quais você deseja que o seu texto seja separado. Para estilizar o separador de colunas, utilize o column-rule que recebe como valor os mesmos paramêtros do atributo border, ou seja, largura, tipo de traçado e cor. Para a classe abaixo, veja o resultado:
[code language=”css”] #texto-2colunas{width: 600px;
margin: 0 auto;
border: 2px solid #FF1493;
padding: 10px;
column-count:3;
column-rule:1px dotted #FF1493;
-moz-column-count:3;
-moz-column-rule:1px dotted #FF1493;
-webkit-column-count:3;
-webkit-column-rule:1px dotted #FF1493;
-o-column-count:3;
-o-column-rule:1px dotted #FF1493;
}
[/code]
Simples assim! Caso queira baixar o arquivo HTML com o exemplo, clique aqui.
Não precisa usar o -moz- pq o mozilla firefox já reconhece as “funções” do w3c.
Natanael, dependendo da propriedade não funciona sem o -moz. As mais usuais, como o border-radius, opacity, text-shadow funciona ok, mas no caso da coluna, não. Acabei de testar no Firefox 6.0.2.
That’s way more cevler than I was expecting. Thanks!
Parece que no IEca só funciona na versão 10. Tem como fazer funcionar pelo menos da 8 para cima?
Achei interessante e preciso muito usar o texto em duas ou mais colunas.
Obriga.