What is the best way to prevent the browser from splitting paragraphs when using CSS3 columns? Below is the code I am currently using:
<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;
}
The illustration on the left shows the default behavior, while the one on the right showcases my desired outcome.
I am not concerned if the columns have varying lengths; what matters is that none of the divs are split between columns.