CSS Master

Figure 4.30. Preventing column breaks inside elements with break-inside

CSS Fragmentation Module Level 3

TheCSSFragmentationModuleLevel 313 specificationiscloselyrelatedtothe

multiple-columnandpagedmediaspecifications.Itfurtherdefineshowblock

boxesshouldbreakacrosscolumns,pages,andregions.

It’salsopossibletoforceabreakbeforeorafteranelementusingbreak-beforeand
break-after.Let’sforceacolumnbreakbeforethethirdparagraph:

.multi-col p:nth-of-type(3) {

background-color: #e91e63;

break-before: column;

}

Herewe’veusedthecolumnvaluetoforceacolumnbreakbeforetheselectedelement
(seeFigure4.31).Thebreak-afterpropertyworkssimilarly,forcingacolumn
breakaftertheselectedelement.Thealwaysvaluealsoforcescolumnbreaks,but
alwayswillalsoforceacolumnbreakinpagedmedia.

(^13) http://dev.w3.org/csswg/css-break-3/
Complex Layouts 165