Arresta le colonne CSS3 interrompendo i paragrafi fino a

Question

Come farei per impedire al browser di suddividere i paragrafi quando si utilizzano le colonne CSS3? Ho questo codice:

<div class="container"> 
    <div class="box"><!-- text --></div> 
    <div class="box"><!-- text --></div> 
    <div class="box"><!-- text --></div> 
    <div class="box"><!-- text --></div> 
    <div class="box"><!-- text --></div> 
    <div class="box"><!-- text --></div> 
    <div class="box"><!-- text --></div> 
    <div class="box"><!-- text --></div> 
</div> 

.container { 
    column-count: 3; 
} 

Questa è una rappresentazione visiva di ciò che voglio. A sinistra, è ciò che accade di default e, a destra, quello che voglio succedere.

Non mi importa se le colonne sono lunghezze disuguali, ciò che è importante è che nessuno dei div sono rotti nelle colonne.

Answer 1

L'impostazione break-inside: avoid farebbe questo, secondo la descrizione di break-inside nel CSS multi-colonna di modulo di layout. Ma browser support è limitato in modo che è necessario utilizzare in aggiunta alcune altre impostazioni che riflettono le idee di correnti d'aria più grandi, attuata in alcuni browser:

.container { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
} 
 
div.box { 
 
    text-indent: 1em; /* To show paragraph starts. */ 
 
    page-break-inside: avoid; /* For Firefox. */ 
 
    -webkit-column-break-inside: avoid; /* For Chrome & friends. */ 
 
    break-inside: avoid; /* For standard browsers like IE. :-) */ 
 
}

<div class="container"> 
 
    <div class="box">This is a short paragraph.</div> 
 
    <div class="box">This is a short paragraph, too.</div> 
 
    <div class="box">This is yet another short paragraph.</div> 
 
    <div class="box">This is a short paragraph.</div> 
 
    <div class="box">This, too, is a short paragraph.</div> 
 
    <div class="box">This is a longer paragraph, which may get divided into two columns..</div> 
 
    <div class="box">This is a short paragraph.</div> 
 
    <div class="box">This is a short paragraph.</div> 
 
</div>

Answer 2

Sulla .box aggiungere lo stile:

.box { 
    display:inline-block; 
    ... other styles ... 
} 

Demo: