CSS break-after Property

CSS break-after Property

The break-after property in CSS controls where breaks (like page breaks, column breaks, or section breaks) should occur after an element. It's commonly used in print layouts or multi-column layouts to specify how content breaks around an element.

1. Syntax

selector {
  break-after: value;
}

Value	Description
auto (default)	Allows the browser to decide where to break after the element.
always	Forces a break (page, column, or section break) after the element.
avoid	Prevents any break from happening after the element.
left	Forces a page break after the element on the left side (in left-to-right documents).
right	Forces a page break after the element on the right side (in left-to-right documents).
column	Forces a column break after the element (works in multi-column layouts).
page	Forces a page break after the element (in print layouts).

2. Example – Forcing a Page Break After an Element (Print Layout)

@media print {
  p {
    break-after: page;
  }
}

✅ Forces a page break after each <p> element when printing.

3. Example – Preventing Breaks After an Element

div {
  break-after: avoid;
}

✅ Prevents any break (page, column, or section) from occurring after the <div> element.

4. Example – Forcing a Column Break After an Element

div {
  column-count: 2;
  break-after: column;
}

✅ Forces a column break after the <div>, starting the next content in a new column.

5. Example – Forcing a Section Break After an Element

section {
  break-after: always;
}

✅ Forces a break (section, page, or column) after each <section> element.

6. Best Practices

✔ Use break-after to ensure proper breaks when printing documents or using multi-column layouts.
✔ When dealing with long content, use breaks after important elements (like headings or paragraphs) to enhance readability.
✔ Test on different media (e.g., screen, print) for optimal layout.