CSS Break-Before Control Page, Column, and Region Breaks

CSS break-before Property

The CSS break-before property controls how page, column, or region breaks occur before an element. It’s useful for web design, allowing precise management of layout and content flow.

Syntax

/* Generic break values */
break-before: auto;
break-before: avoid;
break-before: always;
break-before: all;

/* Page break values */
break-before: avoid-page;
break-before: page;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;

/* Column break values */
break-before: avoid-column;
break-before: column;

/* Region break values */
break-before: avoid-region;
break-before: region;

/* Global values */
break-before: inherit;
break-before: initial;
break-before: revert;
break-before: revert-layer;
break-before: unset;

Values

Generic Break Values

• auto: Allows breaks naturally.
• avoid: Prevents breaks.
• always: Forces a break (page, column, or region).
• all: Forces a break through all fragmentation contexts.

Page Break Values

• avoid-page: Prevents page breaks.
• page: Forces a page break.
• left: Starts next page on the left.
• right: Starts next page on the right.
• recto: Starts next page on the right in a left-to-right layout.
• verso: Starts next page on the left in a left-to-right layout.

Column Break Values

• avoid-column: Prevents column breaks.
• column: Forces a column break.

Region Break Values

• avoid-region: Prevents region breaks.
• region: Forces a region break.

Global Values

• inherit: Uses the value from the parent element.
• initial: Sets the default value.
• revert: Resets to the browser default.
• revert-layer: Resets to the UA style sheet.
• unset: Resets to the natural value.

Page Break Aliases

For backward compatibility, page-break-before is treated as an alias for break-before:

Examples

Breaking into Neat Columns

In this example, we use break-before: column to ensure each <h2> heading starts at the top of a new column, making the content well-organized and easy to read.

HTML

<article>
  <h1>Main Heading</h1>

  <h2>Subheading 1</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris.
  </p>

  <h2>Subheading 2</h2>
  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo.
  </p>

  <h2>Subheading 3</h2>
  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
  </p>

  <h2>Subheading 4</h2>
  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada.
  </p>
</article>

CSS

html {
  font-family: helvetica, arial, sans-serif;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
  break-before: column;
}

p {
  line-height: 1.5;
}

article {
  column-width: 200px;
  gap: 20px;
}

Forcing a Page Break

In this example, we use break-before: page to force a page break before a specific heading. This is useful for print media or generating PDFs where you want to ensure that certain sections start on a new page.

HTML

<article>
  <h1>Main Heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris.
  </p>

  <h2 class="new-page">Subheading 1</h2>
  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo.
  </p>

  <h2>Subheading 2</h2>
  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
  </p>

  <h2>Subheading 3</h2>
  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada.
  </p>
</article>

CSS

html {
  font-family: helvetica, arial, sans-serif;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
}

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
}

h2.new-page {
  break-before: page;
}

p {
  line-height: 1.5;
}

Browser Compatibility

The break-before property is well-supported across modern web browsers, ensuring consistent layout control for web developers. However, some older browsers may have limited support. For the most up-to-date information, check resources like Can I use or the MDN Web Docs Browser Compatibility Data.

Understanding browser compatibility helps ensure your layouts work consistently across different platforms. Always test your web pages in multiple browsers to catch any issues early.