incolonnare il testo

In questo caso la compatibilità non è supportata su IE, che continuerà a visualizzare il testo ignorando i selettori impiegati. Per gli altri browser è necessario utilizzare i suffissi proprietari -moz e -webkit

Le proprietà utilizzate sono:



column-width --> accetta sia px che em, e imposta la larghezza minima della colonna. Il testo verrà suddiviso in N colonne a seconda delle dimensioni che assume il browser

column-count--> metodo alternativo per stabilire il numero obbligatorio di colonne in cui suddividere il testo

column-gap--> è il margine fra una colonna e l'altra, espresso in em o px

column-rule--> divisore grafico, simile allo stile che è possibile dare a un bordo




questo lo stile applicato allo testo di cui sotto (ovviamente vedrete la divisione in colonna solo se c'è il supporto da parte del browser)


.incolonna1{
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;


-moz-column-gap:5em;
-webkit-column-gap:5em;
column-gap:5em;

-moz-column-rule:0.3em dotted #ccc;
-webkit-column-rule:0.3em dotted #ccc;
column-rule:0.3em dotted #ccc;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper nibh sed ipsum malesuada ac molestie ante fermentum. Suspendisse suscipit libero a elit euismod ullamcorper. Nam accumsan eros arcu, eu vulputate lacus. Mauris quis vulputate nisi. Nunc libero turpis, tincidunt nec consequat sit amet, mattis in nibh. Aliquam erat volutpat. Nulla sem quam, laoreet a fermentum imperdiet