Dividindo texto em colunas com CSS3

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.



// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

4 Comentários

  • Responder setembro 13, 2011

    natanael

    Não precisa usar o -moz- pq o mozilla firefox já reconhece as “funções” do w3c.

    • Responder setembro 13, 2011

      admin_pr

      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.

  • Responder novembro 17, 2011

    Daveigh

    That’s way more cevler than I was expecting. Thanks!

  • Responder fevereiro 9, 2013

    Weder Monteiro

    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.

// Siga as boas práticas: Comente!