CSS：强制 li 在列数内不切到新列

Question

我正在尝试强制 li.key 不换行到新列。我想要一个新的 li.key 从每列的顶部开始。 Here's a JS Fiddle.

不使用JS可以吗？

<ol class="columns">
    <li class="key">A
        <ol>
            <li>Alcoholic beverage, wine, table, white, Fume Blanc</li>
            <li>Alcoholic Beverage, wine, table, red, Cabernet Franc</li>
            <li>Apples, raw, red delicious, with skin</li>
        </ol>
    </li>
    <li class="key">B
        <ol>
            <li>Buckwheat groats, roasted, dry</li>
            <li>Babyfood, vegetables, carrots, junior</li>
            <li>Beef, round, knuckle, tip center, steak, separable lean and fat, trimmed to 0" fat, all grades, raw</li>
            <li>Bagels, plain, unenriched, with calcium propionate (includes onion, poppy, sesame)</li>
            <li>Babyfood, juice, mixed fruit</li>
            <li>Beef, short loin, top loin, separable lean and fat, trimmed to 1/8" fat, prime, cooked, broiled</li>
            <li>Beef, rib eye steak, boneless, lip off, separable lean and fat, trimmed to 0" fat, select, raw</li>
            <li>Babyfood, dinner, beef noodle, strained</li>
            <li>Beef, shoulder steak, boneless, separable lean and fat, trimmed to 0" fat, select, cooked, grilled</li>
            <li>Beef, brisket, flat half, separable lean only, trimmed to 1/8" fat, select, cooked, braised</li>
            <li>Beef, ground, 90% lean meat / 10% fat, crumbles, cooked, pan-browned</li>
            <li>Beef, rib eye steak, boneless, lip off, separable lean only, trimmed to 0" fat, select, raw</li>
            <li>Beef, shoulder top blade steak, boneless, separable lean and fat, trimmed to 0" fat, all grades, cooked, grilled</li>
            <li>Beef, round, tip round, roast, separable lean only, trimmed to 0" fat, all grades, cooked, roasted</li>
        </ol>
    </li>
    <li class="key">C
        <ol>
            <li>Crackers, melba toast, plain</li>
            <li>Chicken, feet, boiled</li>
            <li>Candies, fudge, vanilla with nuts</li>
            <li>Cereals ready-to-eat, MALT-O-MEAL, Apple ZINGS</li>
            <li>Cherries, sweet, canned, pitted, heavy syrup pack, solids and liquids</li>
            <li>Chicken, dark meat, thigh, meat only, enhanced, raw</li>
            <li>Cereals ready-to-eat, GENERAL MILLS, FIBER ONE 80 Calories, Honey Squares</li>
            <li>Candies, caramels, chocolate-flavor roll</li>
            <li>Cereals ready-to-eat, KASHI GOLEAN CRUNCH!</li>
            <li>Cheese, pasteurized process, pimento</li>
            <li>Chicken, skin (drumsticks and thighs), enhanced, raw</li>
        </ol>
    </li>
    <li class="key">D
        <ol>
            <li>Dates, deglet noor</li>
        </ol>
    </li>
    <li class="key">F
        <ol>
            <li>Fast foods, french toast sticks</li>
            <li>Fish, eel, mixed species, cooked, dry heat</li>
            <li>Formulated bar, MARS SNACKFOOD US, SNICKERS Marathon Energy Bar, all flavors</li>
        </ol>
    </li>
    <li class="key">G
        <ol>
            <li>Gelatin desserts, dry mix, prepared with water</li>
        </ol>
    </li>
    <li class="key">I
        <ol>
            <li>Infant formula, ABBOTT NUTRITION, SIMILAC, ISOMIL, with iron, liquid concentrate (formerly ROSS)</li>
        </ol>
    </li>
    <li class="key">K
        <ol>
            <li>Kale, scotch, cooked, boiled, drained, with salt</li>
        </ol>
    </li>
    <li class="key">L
        <ol>
            <li>Lamb, Australian, imported, fresh, loin, separable lean and fat, trimmed to 1/8" fat, cooked, broiled</li>
        </ol>
    </li>
    <li class="key">M
        <ol>
            <li>Mollusks, clam, mixed species, raw</li>
        </ol>
    </li>
    <li class="key">P
        <ol>
            <li>Pork, fresh, loin, center rib (chops), boneless, separable lean only, cooked, braised</li>
            <li>Pork, fresh, carcass, separable lean and fat, raw</li>
            <li>PREGO Pasta, Zesty Mushroom Italian Sauce, ready-to-serve</li>
            <li>Pears, raw, red anjou</li>
        </ol>
    </li>
    <li class="key">S
        <ol>
            <li>Soy protein isolate, potassium type, crude protein basis</li>
            <li>Stew, mutton, corn, squash (Navajo)</li>
            <li>Snacks, granola bars, soft, uncoated, nut and raisin</li>
            <li>Salad dressing, blue or roquefort cheese dressing, light</li>
            <li>Squab, (pigeon), meat only, raw</li>
        </ol>
    </li>
    <li class="key">T
        <ol>
            <li>Tangerine juice, frozen concentrate, sweetened, diluted with 3 volume water</li>
        </ol>
    </li>
    <li class="key">V
        <ol>
            <li>V8 V. FUSION Juices, Strawberry Banana</li>
            <li>Veal, shoulder, whole (arm and blade), separable lean only, cooked, braised</li>
        </ol>
    </li>
    <li class="key">W
        <ol>
            <li>Whale, beluga, eyes (Alaska Native)</li>
        </ol>
    </li>
</ol>

CSS：

.columns {
    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;
    margin-top:5px;
    -webkit-column-gap:40px;
    -moz-column-gap:40px;
    column-gap:40px;
    -webkit-column-fill:balance;
    -moz-column-fill:balance;
    column-fill:balance;
    overflow:hidden;

}
ol { font-size:0 }
li { font-size:14px }
.key > ol {
    margin-top:5px;
    margin-bottom:15px
}

期望的结果：（查看每列顶部的字母。）

Col 1        Col 2        Col 3          
A            P            Y
 -item        -item        -item
 -item        -item        -item
 -item      
             Q
H             -item
 -item        -item

Answer 1

演示 - http://jsfiddle.net/victor_007/f8pufx7k/5/

ol.columns > li{
    display:inline-block;
}

Answer 2

对此有新的属性，但目前支持limited to IE (!!)：

‘break-before’, ‘break-after’, ‘break-inside’

因此我们可以使用以下代码确保没有新列从特定键开始：

.key {
    break-inside: avoid-column;
}

FIDDLE（目前只在IE中工作！）

Here is a mozilla article 解释了这些新属性：

要定义是否必须休息，应用以下规则：

如果三个相关值中的任何一个是强制中断值，即 always、left、right、page、column 或 region，它具有优先权。如果 几个有关的值就是这样一个突破，其中之一 采用流中最新出现的元素（即 break-before 值优先于 break-after 值，后者 本身优先于 break-inside 值）。如果任何一个 三个关注值是一个避免中断值，即避免， 避免页面，避免区域，避免列，不会应用这样的中断 那时。