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.
