Prevent element fragmentation in multi-column layo

问题:

Given this code:

#wrapper { 
    border:2px solid red;
    padding:10px;
    width:310px; height:310px;
    -webkit-column-width:150px; -webkit-column-gap:10px;
    -moz-column-width:150px; -moz-column-gap:10px;
    column-width:150px; column-gap:10px;
}

#wrapper > div { 
    width:150px;
    background:#ccc;
    margin-bottom:10px;
    white-space:no-break;
}

<div id="wrapper">
    <div>FIRST BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin.</div>
    <div>SECOND BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat.</div>
    <div>THIRD BOX: In at libero ipsum, vel cursus ante. Phasellus ac odio in tortor commodo venenati

I would like to arrange these 3 boxes into 2 columns using the CSS multi-column layout.

JSFiddle Demo

As you can see from my demo, it works. However, I'm concerned with the second box being fragmented into both columns. I would like to prevent this element fragmentation if possible. Is there any way to tell the browser not to fragment my boxes into multiple columns?

(Note that both the second and third box could easily fit into the second column, which is the arrangement I'd like to achieve.)

回答1:

Some experimentation led me to:

-webkit-column-break-inside: avoid;

http://jsfiddle.net/7TXGS/

However, it doesn't work in Chrome Stable/Beta. It works in Chrome Canary (and Dev):

回答2:

Probably using -webkit-column-break-after: always; with the FIRST BOX is appropriate.

<div id="wrapper">
    <div> FIRST BOX: ... </div>
    <div> SECOND BOX: ... </div>
    <div> THIRD BOX: ... </div>
</div>

And this CSS code:

#wrapper { 
    border:2px solid red;
    padding:10px;
    width:310px; 
    //height:310px;
    -webkit-column-width:150px; -webkit-column-gap:10px;
    -moz-column-width:150px; -moz-column-gap:10px;
    column-width:150px; column-gap:10px;
}

#wrapper > div { 
    width:150px;
    background:#ccc;
    margin-bottom:10px;
}
#wrapper > div:first-child {
   -webkit-column-break-after: always;
}