CSS break-before Property

CSS break-before Property

The break-before property in CSS controls where breaks (such as page breaks, column breaks, or section breaks) should occur before an element. It's particularly useful for controlling breaks in printed documents or multi-column layouts.

1. Syntax

selector {
  break-before: value;
}

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

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

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

✅ Forces a page break before each <h2> element when printing.

3. Example – Preventing Breaks Before an Element

div {
  break-before: avoid;
}

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

4. Example – Forcing a Column Break Before an Element

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

✅ Forces the content inside the <div> to start in a new column.

5. Example – Forcing a Break Before Elements in a Multi-Column Layout

div {
  column-count: 3;
}

h2 {
  break-before: always;
}

✅ Forces a break before each <h2>, starting a new section in the layout.

6. Best Practices

✔ Use break-before for controlling breaks when printing documents or using multi-column layouts.
✔ When working with long content, ensure appropriate breaks for readability and structure.
✔ Test on different media types (e.g., print and screen) to ensure the best user experience.