CSS:Force li'；s在列计数内，以不剪切到新列

我试图强制li.key不换行到新列。我想要一个新的li.key从每列的顶部开始

如果不使用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>

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

演示-

---

此项有新属性，但目前支持（！！）：

因此，我们可以确保在具有以下代码的特定键中没有新列开始：

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

（目前仅在IE中工作！） 这就解释了这些新特性：

要定义是否必须执行中断，请应用以下规则：

如果三个相关值中的任何一个为强制断开值，则 始终，左、右、页、列或区域具有优先权。如果 几个相关的值就是这样一个中断，其中 获取流中最新出现的元素（即 “在前打断”值优先于“在后打断”值 其本身优先于“内部打断”值）。如果有 三个相关值是避免中断值，即避免， 避免页面、避免区域、避免列，不会应用此类中断 在那一点上

---

宽度：100%；如果文本太小，将阻止列表彼此并排显示。老实说，令人惊讶的是，解决方案就这么简单。Tar.@duck-注意，即使使用

宽度：100%

-如果将页面大小调整为先窄后宽，第三列也会下降。我同意这是一个很好的解决你具体问题的方法

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

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

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