Stop CSS3-Spalten, die Absätze brechen

Question

Wie würde ich gehen, um zu verhindern, dass der Browser Absätze bricht, wenn CSS3-Spalten verwendet werden? Ich habe diesen Code:

<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; 
} 

Dies ist eine visuelle Darstellung von dem, was ich will. Auf der linken Seite ist das, was standardmäßig passiert, und auf der rechten Seite, was ich möchte.

ich nichts dagegen, wenn die Spalten ungleich lang sind, was wichtig ist, ist, dass keiner der divs über mehrere Spalten gebrochen werden.

Answer 1

Die break-inside: avoid Einstellung dies tun würde, entsprechend der Beschreibung von break-inside in der CSS-Multi-column Layout-Modul. Aber browser support ist begrenzt, so dass Sie zusätzlich noch andere Einstellungen benötigen, die Ideen in älteren Entwürfe reflektieren, in einigen Browsern implementiert:

.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

Auf der .box fügen Sie den Stil:

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

Demo: