CSS: Force columns inside a column to not cut into a new column.
I am trying to get li.key not to wrap to a new column. I want the new li.key to start at the top of each column. Here's the JS script.
Is this possible without using 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
}
Desired Output: (See how the letters are at the top of each column.)
Col 1 Col 2 Col 3
A P Y
-item -item -item
-item -item -item
-item
Q
H -item
-item -item
+3
source to share
2 answers
There are new properties for this, but support is currently limited to IE (!!):
'break-before,' break-after, 'break-inside
This way we can guarantee that the new column does not start with a specific key with the following code:
.key {
break-inside: avoid-column;
}
FIDDLE (currently only works in IE!)
Here is a mozilla article explaining these new properties:
To determine if a break should be performed, the following rules apply:
If any of the three matching values is a forced interrupt value, that is, always, left, right, page, column, or region, takes precedence. If multiple of the matching values are such a break, one of the elements that appears last in the flow (i.e., the value break-before takes precedence over the value of break-after, which itself takes precedence over the internal value). If any of the three matching values is an exception value to avoid, page avoid, region avoid, column avoid, that break will not apply at that point.
+1
source to share