CSS Master

Figure 4.29. Elements may break across columns in a multicolumn layout

Topreventthis,usebreak-inside: avoidorbreak-inside: avoid-column.The

break-insidepropertyappliestothechildrenofamulticolumncontainer.For

example,topreventallchildrenof.multi-colfrombreakingacrosscolumnboxes,

usethefollowing:^11

.multi-col > * {

break-inside: avoid-column;

}

Nowthepurpleparagraphnolongerbreaksacrosscolumns,ascanbeseeninFig-

ure4.30.Thebreak-insidepropertyalsoaffectspagedmedia,^12 whichexplains

whytherearebothavoidandavoid-columnvalues.Thedifferenceisthatavoid-

columnpreventsaboxfrombreakingacrosscolumnswhileavoidpreventsabox

frombreakingacrosscolumnsandpages.

(^11) WebKit-andBlink-basedbrowserscurrentlyusethenon-standard-webkit-column-break-
insideproperty.Itworksthesameway,butavoidisitsonlyvalidvalue.
(^12) http://www.w3.org/TR/css3-page/
164 CSS Master