css - 防止多列布局中的元素碎片

Question

给定这段代码:

#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

我想使用 CSS multi-column layout 将这 3 个框排列成 2 列.

JSFiddle Demo

正如您从我的演示中看到的那样，它有效。但是，我担心第二个框被分成两列。如果可能的话，我想防止这个元素碎片化。有没有办法告诉浏览器不要将我的框分成多列？

(请注意，第二个和第三个框都可以很容易地放入第二列，这是我想要实现的安排。)

Answer 1

一些实验让我:

-webkit-column-break-inside: avoid;

http://jsfiddle.net/7TXGS/

但是，它在 Chrome 稳定版/测试版中不起作用。它适用于 Chrome Canary (和开发):