Como dividir o texto do post em colunas

11.08.2016  @DigaoPessoa
Em certos casos pode ser interessante dividir o texto do post em duas ou mais colunas automaticamente, no estilo de jornal ou Bíblia. Para realizarmos isso com CSS, através da propriedade column, é simples:

Siga as Etapas


1. Adicione o código CSS:

/* Dividir post em colunas */
.duas-colunas {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
-webkit-column-rule: 1px solid #cccccc; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid #cccccc; /* Firefox */
column-rule: 1px solid #cccccc;
 -webkit-column-span: all; /* Chrome, Safari, Opera */
 column-span: all;
-webkit-column-width: ;/* Chrome, Safari, Opera */
-moz-column-width: ;/* Firefox */
column-width: ;
}


2. Configure a <div> do HTML da postagem para chamar o estilo definido no CSS, como no exemplo abaixo:

<div class=”duas-colunas”>
Seu texto a ser dividido em colunas...
</div>


Observações:


  1. Sempre salve uma cópia do seu template antes de fazer qualquer alteração...
  2. Altere o número em azul de acordo com a quantidade de colunas que deseja.
  3. O número em vermelho define o espaço entre as colunas em pixels, porcentagem ou tamanho relativo.
  4. O trecho em verde define a largura o estilo e a cor da linha que separa as colunas (o estilo obedece as propriedades de border e as cores da tabela de cores hexadecimais).
  5. O trecho em rosa serve para separar o título ou subtítulo das colunas com all ou apague-o para que o título ou subtítulo também fique dividido pelas colunas junto com o texto.
  6. O trecho das três últimas linhas do CSS acima serve para definir o tamanho das colunas: Ex.:  -webkit-column-width: 100px;   -moz-column-width: 100px;   column-width: 100px.
  7. Adicione o texto a ser dividido em colunas no trecho em laranja da segunda tabela.

Conclusão:


Se tudo deu certo, você deve obter o seguinte resultado com o título centralizado separado das colunas:


Bem-aventuranças

1 Vendo as multidões, Jesus subiu à montanha e sentou-se. Os discípulos aproximaram-se, 2 e ele começou a ensinar: 3 “Felizes os pobres no espírito, porque deles é o Reino dos Céus. 4 Felizes os que choram, porque serão consolados. 5 Felizes os mansos, porque receberão a terra em herança. 6 Felizes os que têm fome e sede da justiça, porque serão saciados. 7 Felizes os misericordiosos, porque alcançarão misericórdia. 8 Felizes os puros no coração, porque verão a Deus. 9 Felizes os que promovem a paz, porque serão chamados filhos de Deus. 10 Felizes os perseguidos por causa da justiça, porque deles é o Reino dos Céus. 11 Felizes sois vós, quando vos injuriarem e perseguirem e, mentindo, disserem todo mal contra vós por causa de mim. 12 Alegrai-vos e exultai, porque é grande a vossa recompensa nos céus. Pois foi deste modo que perseguiram os profetas que vieram antes de vós.


Ou, ainda, com o título junto ao texto na coluna...


Sal e luz

13 “Vós sois o sal da terra. Ora, se o sal perde seu sabor, com que se salgará? Não servirá para mais nada, senão para ser jogado fora e pisado pelas pessoas. 14 Vós sóis a luz do mundo. Uma cidade construída sobre a montanha não fica escondida. 15 Não se acende uma lâmpada para colocá-la debaixo de uma caixa, mas sim no candelabro, onde ela brilha para todos os que estão 7 em casa. 16 Assim também brilhe a vossa luz diante das pessoas, para que vejam as vossas boas obras e louvem o vosso Pai que está nos céus. Jesus e a Lei: a nova justiça 17 “Não penseis que vim abolir a Lei e os Profetas. Não vim para abolir, mas para cumprir. 18 Em verdade, eu vos digo: antes que o céu e a terra deixem de existir, nem uma só letra ou vírgula serão tiradas da Lei, sem que tudo aconteça. 19 Portanto, quem desobedecer a um só destes mandamentos, por menor que seja, e assim ensinar os outros, será considerado o menor no Reino dos Céus. Porém, quem os praticar e ensinar será considerado grande no Reino dos Céus. 20 Eu vos digo: Se vossa justiça não for maior que a dos escribas e dos fariseus, não entrareis no Reino dos Céus.

Print Friendly and PDF

2 comentários:

  1. Hey There. I discovered your blog the use of msn. That is a very smartly written article. I will make sure to bookmark it and return to read extra of your helpful info. Thank you for the post. I'll certainly return. capital one card login in

    ResponderExcluir
  2. Hello all, here every person is sharing such experience, thus it's nice to read this web site, and I used to pay a quick visit this blog every day. facebook login

    ResponderExcluir