Break Before

Controls how page, column, or region breaks should behave before an element. Similar to break-after but affects the space before the element. This provides precise control for print layouts and multi-column content, ensuring content flows naturally across pages and columns.

Layout1 variant3 examples

Official Docs Open Playground

Basic usage:

<h2 class="break-before-page">New Chapter</h2>
<p>This heading and all content below it will start on a new page when printed.</p>

Examples

Forces content to start on a new page when printed

<h2 class="break-before-page">New Chapter</h2>
<p>This heading and all content below it will start on a new page when printed.</p>

Edit in playground

Forces a section to begin in a new column in multi-column layout

<div class="columns-2">
  <section>
    <h3>First Section</h3>
    <p>Content in the first column...</p>
  </section>
  <section class="break-before-column">
    <h3>Second Section</h3>
    <p>This section forces itself to start in a new column.</p>
  </section>
</div>

Edit in playground

Book-like layout with chapters starting on new pages when printed

<!-- Table of contents with chapter breaks -->
<article class="max-w-prose mx-auto">
  <h1 class="text-3xl font-bold mb-6">Book Title</h1>
  <div class="mb-12">
    <h2 class="text-xl font-semibold mb-4">Table of Contents</h2>
    <ul class="space-y-2">
      <li>Chapter 1: Introduction</li>
      <li>Chapter 2: Main Concepts</li>
      <li>Chapter 3: Advanced Techniques</li>
    </ul>
  </div>
  <h2 class="text-2xl font-bold mb-6 break-before-page">Chapter 1: Introduction</h2>
  <p class="mb-4">Introduction content...</p>
  <h2 class="text-2xl font-bold mb-6 break-before-page">Chapter 2: Main Concepts</h2>
  <p class="mb-4">Main concepts content...</p>
</article>

Edit in playground

Live Preview

Try the Break Before utility with different values

Open Interactive Playground

Variants

auto: default browser behavior, avoid: avoid breaks before element, always: always insert a break before, page: force page break before, column: force column break before, left/right: force page break to left/right pages in duplex printing

autoavoidalwaysallpageleftrightcolumn