CSS Page Breaks: break-before, break-after, break-inside, Orphans, and Widows

Use break-before to control the boundary before an element, break-after for the boundary after it, and break-inside to discourage splitting an element. Use orphans and widows to set minimum paragraph line counts at the bottom and top of pages. Put print-specific rules inside @media print. These declarations guide the browser’s pagination; they cannot guarantee that oversized content will fit intact.

CSS paged media describes presentation on discrete pages. Fragmentation describes how content is divided to fit those pages (and can also apply to columns and other fragmentation contexts). That distinction helps explain why the modern break properties are broader than print alone. See the MDN guides to paged media and fragmentation.

1. Start with a print stylesheet

Keep screen layout rules separate from print rules where practical. The following example can be saved as an HTML file and opened in a browser; use Print Preview to inspect the pages. The CSS is illustrative: actual breaks depend on the content, page dimensions, print settings, and browser or PDF renderer.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Print layout example</title>
  <style>
    @page {
      size: A4;
      margin: 18mm;
    }

    @media print {
      .chapter {
        break-before: page;
      }

      .callout,
      figure,
      table {
        break-inside: avoid;
      }

      h2,
      h3 {
        break-after: avoid;
      }

      p {
        orphans: 2;
        widows: 2;
      }
    }
  </style>
</head>
<body>
  <h1>Guide to the system</h1>
  <p>Introductory content for the guide. Add enough paragraphs and examples to see pagination in Print Preview.</p>

  <section class="chapter">
    <h2>First chapter</h2>
    <p>Chapter content goes here. A heading should not be stranded at the foot of a page.</p>
    <aside class="callout">
      <strong>Note</strong>
      <p>A short callout is best kept together when it fits on the page.</p>
    </aside>
  </section>
</body>
</html>

@page sets page-box characteristics such as size and margins in supporting paged-media contexts. It does not itself decide which element moves to a new page; the break properties and the renderer’s layout determine that.

2. Choose the property by where the break belongs

Property	Where it acts	Typical use
`break-before`	Before the element’s generated box	Start a chapter or major section on a fresh page
`break-after`	After the element’s generated box	End a title page or keep a heading with what follows
`break-inside`	Within the element	Discourage splitting a short callout, figure, or row group
`orphans`	Paragraph lines at the bottom of a page	Keep a minimum number of lines before a split
`widows`	Paragraph lines at the top of the next page	Keep a minimum number of lines after a split

`break-before`: control the start of a box

Use it when the next element should begin on a new page. The value page requests a page break. The modern property also has values for other fragmentation contexts, such as columns, but a page-specific rule is usually clearer in print CSS.

@media print {
  .chapter {
    break-before: page;
  }
}

Apply the rule to the section or heading that owns the desired start boundary. If every section begins on a new page, introductory material may leave a large blank area; apply the selector only to sections where that layout makes sense.

`break-after`: control the end of a box

Use this when the desired boundary is after the current element. For example, a cover page can end before the contents page:

@media print {
  .cover {
    break-after: page;
  }
}

A softer rule can discourage a break after a heading so the heading stays with following content:

@media print {
  h2,
  h3 {
    break-after: avoid;
  }
}

An avoidance rule is a preference, not a promise. If the following content cannot fit, the renderer still needs to paginate the document.

`break-inside`: discourage internal splits

Use break-inside: avoid for a compact component that should remain together if it fits, such as a note or short figure. It does not make a large element physically unbreakable. A table, card, or paragraph longer than the available page area may still need to split so the document can continue.

@media print {
  .callout,
  figure {
    break-inside: avoid;
  }
}

Avoid applying it indiscriminately to every container. If several large blocks each request avoidance, the layout engine has fewer preferred break points and may produce surprising gaps or relax the constraints.

3. Understand how declarations meet at a boundary

A break decision is not always made from one rule in isolation. At a potential boundary, the browser considers the preceding box’s break-after, the following box’s break-before, and the containing box’s break-inside. Forced values such as page request a break in the applicable context. Values such as avoid discourage one.

When forced values meet, the element later in document flow wins: break-before takes precedence over break-after, which takes precedence over break-inside. Avoid values do not cancel a forced break. This is why two rules on adjacent elements can appear to conflict even though each declaration is valid. The current MDN break-before reference describes this precedence in the fragmentation model.

@media print {
  .previous-section {
    break-after: page;
  }

  .next-section {
    break-before: page;
  }

  /* Both declarations request the same boundary. If forced values
     conflict, the later element's break-before has precedence. */
}

Keep one clear owner for each intended boundary when possible. If a rule unexpectedly creates a blank page, inspect both sides of the boundary and the containing element, including styles inherited from shared classes.

4. Keep paragraph lines readable with orphans and widows

orphans sets the minimum number of lines from a block that should remain at the bottom of a page. widows sets the minimum number of lines from a block that should appear at the top of the following page. Under CSS 2.2, each property has an initial value of 2. These are line counts, not character counts or paragraph counts. See the CSS 2.2 paged media specification for the definitions.

Break properties control element boundaries; widows and orphans guide paragraph line groups at a page split.

@media print {
  p {
    orphans: 2;
    widows: 2;
  }

  .long-form p {
    orphans: 3;
    widows: 3;
  }
}

Increasing the values can reduce very short paragraph fragments, but it also limits the renderer’s choices. It may move more content to another page. If the paragraph or containing block cannot satisfy the requested counts at a candidate break, pagination may need to relax constraints and choose another breakpoint. Do not depend on these values to keep every paragraph intact.

5. Pick a rule for common print-layout goals

Goal	Starting rule	What to check
Each chapter begins on a new page	`.chapter { break-before: page; }`	First chapter may not need a forced break after the title page.
Keep a heading with its section	`h2 { break-after: avoid; }`	The section must have enough room or move to the next page.
Keep a compact callout intact if possible	`.callout { break-inside: avoid; }`	Oversized callouts cannot be guaranteed to fit whole.
Avoid single paragraph lines at page edges	`p { orphans: 2; widows: 2; }`	Check whether increased values create excess white space.
Continue a long table across pages	Usually avoid forcing the entire table to stay together.	Inspect headers, row breaks, and the target renderer.

6. Legacy page-break properties

Older stylesheets may use page-break-before, page-break-after, or page-break-inside. The modern fragmentation properties are the general form. MDN documents page-break-before as an alias of break-before; its legacy value always maps to page, since the old property forced a page break rather than a break in another context.

/* Older form */
@media print {
  .chapter {
    page-break-before: always;
  }
}

/* Modern form */
@media print {
  .chapter {
    break-before: page;
  }
}

When maintaining a legacy codebase, check the exact property and values used rather than doing a blind text replacement. The MDN reference covers the documented alias behavior; it does not imply every value of the modern break properties behaves identically in every browser and renderer.

7. Debug print pagination systematically

Reproduce the target output. Use the browser and print or PDF path your readers will use. Page dimensions, margins, fonts, and scaling change where content fits.
Find the first unexpected boundary. Inspect the element before the gap, the element after it, and their containing blocks.
Check computed rules. Look for break-before, break-after, break-inside, plus legacy page-break-* declarations in print styles.
Check available space. A large image, heading, table, or callout may simply be unable to fit in the remaining page area.
Reduce conflicting constraints. Remove redundant forced breaks and narrow broad avoid selectors to the components that need them.
Review paragraph line counts. Temporarily use the default two-line values if high orphan or widow counts are pushing substantial content forward.
Repeat after content changes. Text wrapping, font loading, and image dimensions affect pagination; inspect the generated pages after layout-relevant changes.

8. Troubleshooting common problems

Symptom	Likely cause	Fix
A section starts on a blank page	A forced break exists on both the section and a nearby element, or a previous forced break already moved content.	Inspect both sides of the boundary and remove duplicate forced breaks.
`break-inside: avoid` still splits a large block	The box cannot fit intact in the available page area; avoidance is not an absolute guarantee.	Allow splitting, reduce the block’s size, or restructure it into smaller components.
A heading appears alone at the bottom	The next content cannot fit, and no keep-together preference is applied.	Try `break-after: avoid` on the heading and inspect the next block’s size.
Large blank regions appear	Many elements request `avoid`, or widow/orphan counts are high.	Limit avoidance to short components and use modest line counts.
Legacy rule appears ignored	The declaration may target the wrong element or be overridden; behavior can vary by property and renderer.	Check the cascade and try the modern equivalent, such as `break-before: page`.
Browser preview and generated PDF differ	Different engines, fonts, page sizes, or print settings alter layout.	Validate the actual renderer and configuration used to produce the deliverable.

9. Compatibility, performance, reliability, and cost

The cited MDN break-before reference describes the feature as widely available across browsers since January 2019, while warning that support varies for some parts. Do not infer that every value or combination behaves identically. The cited material does not provide a browser-by-browser matrix for each value, so verify the browser and PDF renderer that matters to your project. CSS 2.2 is useful here for the published definitions of widows and orphans; it is not the latest fragmentation specification.

These rules do not have a separate per-break cost. The practical costs are layout and maintenance: repeated pagination work may be needed as content changes, and broad keep-together rules can create awkward whitespace. For reliable output, keep rules narrow, use stable page dimensions and fonts, and inspect the final pages in the actual delivery path. No browser or PDF renderer was tested for this article, so the examples should be treated as documented patterns to verify in your environment.

10. Capture the result for review

For an automated screenshot or a PDF preview, you can use your own browser setup or a capture service. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. Its API can capture a page as PNG, JPEG, WebP, or PDF, and its docs list options such as viewport, full-page capture, and custom CSS. See the ScreenshotNeo documentation for the request options and MDN’s paged media guide for the CSS model. A screenshot can help review a rendered page, but for pagination decisions inspect the PDF or print output itself.

A capture service can remove common overlays before taking a screenshot of a rendered page.

11. FAQ

Does `break-before: page` affect screen layout?

Put print-only pagination rules in @media print when they are intended for printed pages. The rule still depends on a paged fragmentation context to have page-break meaning.

Should every card use `break-inside: avoid`?

No. Apply it to short components that should stay together when space allows. Applying it broadly can reduce useful break opportunities and leave more whitespace.

Are orphans and widows the same thing?

No. Orphans count lines left at the bottom of the current page; widows count lines placed at the top of the following page.

Which value should I use for a new chapter?

Usually break-before: page on the chapter element, within print styles. Check the first chapter separately if it follows a cover or title page.

Or skip the browser setup

To capture a rendered page with one request, use ScreenshotNeo. Adapt the target URL to a page you control or are authorized to capture.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the API documentation for authentication and options. The Python and Node.js versions are below.

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Cookie banners, popups, and chat widgets are removed before the shot; each removal step can be turned off.
Bot checks, blank pages, timeouts, and failed loads are never billed; response headers identify the page verdict and billing status. Cache hits are also not billed.
An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.
The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

1. Start with a print stylesheet

2. Choose the property by where the break belongs

break-before: control the start of a box

break-after: control the end of a box

break-inside: discourage internal splits