Codectionary / Developer documentation / CSS

Controlling Page and Column Breaks

break-before, break-after, and break-inside guide fragmentation across printed pages and multi-column containers. Avoid values request that related content stay together, but oversized boxes and layout constraints can force a break. These properties do not create pagination on an ordinary scrolling screen.

Syntax

.card { break-inside: avoid; }
h2 { break-after: avoid; }

Examples

Controlling Page and Column Breaks: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.columns { columns: 2; max-width: 40rem; }
section { break-inside: avoid; border: 1px solid; margin-bottom: 1rem; padding: 1rem; }
h2 { break-after: avoid; }
@media print { .columns { columns: auto; } section { break-inside: avoid; } }
  1. Expected result: Each bordered schedule section is kept together when it fits; print preview uses one column with the same avoidance rule.
  2. The screen layout demonstrates column fragmentation.
  3. Avoid is a constraint the browser may relax when a box cannot fit in a fragment.
HTML used by this example

<div class="columns"><section><h2>Morning</h2><p>Arrival and introduction.</p></section><section><h2>Afternoon</h2><p>Practical workshop and review.</p></section><section><h2>Evening</h2><p>Questions and closing notes.</p></section></div>

Best practices

  • Inspect print preview using realistic content lengths.
  • Do not assume avoid guarantees that arbitrary content always fits one page.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading