Page Breaks

When printing long web pages, the browser decides where to break content across pages. Sometimes this results in awkward breaks — a heading at the bottom of one page with its content on the next, or an image split between pages. CSS page break properties let you control these breaks.

break-inside

break-inside controls what happens when an element reaches a page boundary. The most common value is avoid, which tells the browser not to break the element across pages.

@media print {
  .card {
    break-inside: avoid;
  }

  pre, code {
    break-inside: avoid;
  }

  img {
    break-inside: avoid;
  }
}
    

Apply break-inside: avoid to elements that should stay whole on a page: cards, code blocks, images, tables, and lists. This prevents the ugly split that makes printed pages look messy.

break-before and break-after

break-before and break-after control whether a page break should happen before or after an element. Use page to force a break, or avoid to prevent one.

@media print {
  h2 {
    break-before: page;
  }

  h3 {
    break-after: avoid;
  }
}
    

The first rule forces each H2 to start on a new page — useful for chapter headings in long documents. The second rule prevents a page break right after an H3, keeping the heading with the content that follows it.

widows and orphans

widows and orphans control how many lines of a paragraph can be left alone at the top or bottom of a page. These are classic typography terms that prevent awkward single-line remainders.

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

orphons: 3 means at least 3 lines of a paragraph must stay at the bottom of a page. widows: 3 means at least 3 lines must appear at the top of the next page. This prevents single-line orphans that look bad in print.

Putting It All Together

A good print stylesheet uses all of these properties together. Here is a practical example for a long article page.

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

  h2 {
    break-before: page;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  img, table, pre, blockquote {
    break-inside: avoid;
  }
}
    

This gives you headings that stay with their content, no orphaned lines, and elements that do not split across pages. Combined with the print styles from the previous lesson, you get a professional print experience.