Break Properties

Break those zombies down

break-after: This instructs the browser whether to break a page, region, or column after an element. If you’re familiar with page-break-after, this has the same functionality as that, but they changed the name to generalize it since it works on more than just pages. break-after can have the following values:

• auto: Allows but doesn’t require breaks after the element it appears on
• avoid: Avoids any break (column, page, or region) after the element
• page: Forces a page break after the element
• avoid-page: Avoids a page break after the element

break-before: This is the same as break-after, but it works before the element in question. It takes the same values as break-after. This more generalized property name replaces page-break-before.

break-inside: This is the same as break-after and break-before (and takes the same values, except for page), but it governs whether or not a page break can happen inside an element.

.i-break-for-zombies-before {
    break-before: page;
}
.i-break-for-zombies-inside {
    break-inside: avoid;
}
.i-break-for-zombies-after {
    break-after: avoid-page;
}

Experiments to try:

1. Add the classes to different elements and see how that affects the way columns are separated.
2. Flip each of the break properties to auto and watch how the column distribution changes.