Page break
Learn break-before, break-after, break-inside properties.
The break properties
When printing, you control page break behavior before, after, or inside an element with three properties: break-before, break-after, and break-inside. Their values are page, avoid, or auto.
For example, h1 { break-before: page; } starts every first-level heading on a new page. table { break-inside: avoid; } keeps a table from splitting in two.
break-inside: avoid
When you do not want an element to split across two pages, use break-inside: avoid. Common spots: blockquotes, small tables, figures. The browser tries to keep the element whole; if it cannot fit, it moves to the next page.
For very long elements this cannot be honored: a table that does not fit will still split. It works best for short blocks that look ugly when divided.
Exercise Write a non-splitting invoice table
Write a break-inside: avoid declaration for the .invoice-table selector. The same block must also declare width: 100%. Include both declarations.
Show example solution
/* non-splitting invoice table */
.invoice-table {
break-inside: avoid;
width: 100%;
}Test yourself
-
What does break-before: page do?
h1 { break-before: page; }- Changes the heading color
- Starts a new page before the element
- Hides the heading completely
- Makes the heading bold
Show answer
Starts a new page before the element — Correct. break-before: page starts a new page before the element.
-
Keep the figure whole
figure { ____; }Show answer
figure { break-inside: avoid; } -
What is the difference between old page-break-* and new break-*?
- page-break-* only works on screen, break-* only when printing
- They behave completely differently with no relation
- break-* covers both column and page breaks; page-break-* is legacy
- break-* only works on mobile devices
Show answer
break-* covers both column and page breaks; page-break-* is legacy — Correct. The break-* family handles column and page breaks together; page-break-* is the older form.
-
Match each break property to its effect
- break-before: page
- New page before
- break-after: page
- New page after
- break-inside: avoid
- Stops splitting
- break-before: avoid
- Avoids break before