CSS Paged Media - break-before Property

CSS break-before paged media property specifies whether a page break should occur before an element. This is useful for controlling the layout of printed pages.

Possible Values

Following is a list of possible values that can be passed to b>break-before paged media property:

Generic Break Values

auto − Default value. It will automatically break the page before the element based on available space.
avoid − It avoids a page break before the element, if nedded.

Page Break Values

avoid-page − It prevents the page break before the element.
page − Forces a page break before the element.
left − Forces a page break before the element so that the next page is formatted as a left page.
right − Forces a page break before the element so that the next page is formatted as a right page.

Column Break Values

avoid-column − To avoid a column break before the element.
column − To add a column break before the element.

Applies to

Block-level elements.

DOM Syntax

breakBefore = "auto|avoid|avoid-page|page|left|right|avoid-column|column";

Page Break Aliases

Web-browser treat the legacy page-break-before property as an alias for the break-before property. This ensures smooth working of websites that use page-break-before. The following values should be equal for the break-before property.

page-break-before	break-before
auto	auto
left	left
right	right
avoid	avoid
always	page

Following rules are applied to determine if a break must be done:

Any of the three relevant values (always, left, right, page, column, or region) that is a forced break value takes priority. If there are multiple page break properties, we choose the one that comes last in the sequence. The sequesnce is : break-before takes precedence over break-after, and break-after takes precedence over break-inside.
If any of the three relevant values is avoid page break values such as, avoid, avoid-page, avoid-region, or avoid-column, a page break will not be added at that position.

CSS break-before - auto Value

The following example demonstrates (in a printed layout) that the break-before: auto property automatically breaks the page before the section when page is printed −

<html>
<head>
<style>
   main {
      height: 50px;
      width: 150px;
   }
   section {
      break-before: auto; 
      border: 1px solid black;
      padding: 5px;
      margin: 10px;
   }
   button {
      background-color: violet;
      padding: 5px;
      margin: 10px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>This is a column 1.</p>
      </section>
      <section>
         <h3>Column 2</h3>
         <p>This is a column 2.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>This is a column 3.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>This is a column 4.</p>
      </section>
      <section>
         <h3>Column 5</h3>
         <p>This is a column 5.</p>
      </section>
      <section>
         <h3>Column 6</h3>
         <p>This is a column 6.</p>
      </section>
      <section>
         <h3>Column 7</h3>
         <p>This is a column 7. This section is break automatically based on the available space and content.</p>
      </section>
   </main>
<script>
   function printPage() {
      window.print();
   }
</script>
</body>
</html>

CSS break-before - avoid Value

The following example demonstrates (in a printed layout) that the break-before: avoid property avoids the page break before the section when page is printed −

<html>
<head>
<style>
   main {
      height: 50px;
      width: 180px;
   }
   section {
      break-before: avoid; 
      border: 1px solid black;
      padding: 5px;
      margin: 10px;
   }
   button {
      background-color: violet;
      padding: 5px;
      margin: 10px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>This is a column 1.</p>
      </section>
      <section>
         <h3>Column 2</h3>
         <p>This is a column 2.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>This is a column 3.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>This is a column 4.</p>
      </section>
      <section>
         <h3>Column 5</h3>
         <p>This is a column 5.</p>
      </section>
      <section>
         <h3>Column 6</h3>
         <p>This is a column 6.</p>
      </section>
      <section>
         <h3>Column 7</h3>
         <p>This is a column 7.</p>
      </section>

   </main>
<script>
   function printPage() {
      window.print();
   }
</script>
</body>
</html>

CSS break-before - avoid-page Value

The following example demonstrates that break-before: avoid-page property avoids page break before the element when page is printed −

<html>
<head>
<style>
   .avoid-break-page {
      break-before: avoid-page; 
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>

   <div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
   <div class="avoid-break-page"><p>This is a paragraph 2. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 3. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 4. It will be displayed on first page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-before - page Value

The following example demonstrates that break-before: page property break the page before the element when page is printed −

<html>
<head>
<style>
   .break-page {
      break-before: page; 
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>

   <div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
   <div class="break-page"><p>This is a paragraph 2.After applying the break-before property, this paragraph will be displayed on the second page.</p></div>
   <div><p>This is a paragraph 3. It will be displayed on second page.</p></div>
   <div><p>This is a paragraph 4. It will be displayed on second page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-before - left Value

The following example demonstrates that break-before: left property break the element to the next page on left side when page is printed −

<html>
<head>
<style>
   .page-break-left {
      break-before: left; 
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>

   <div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 2. It will be displayed on first page.</p></div>
   <div class="page-break-left"><p>This is a paragraph 3.After applying the break-before: left property, this paragraph will be displayed to the next page on left side when page is printed.</p></div>
   <div><p>This is a paragraph 4. It will be displayed on second page.</p></div>
   <div><p>This is a paragraph 5. It will be displayed on second page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-before - right Value

The following example demonstrates that break-before: right property break the element to the next page on right side when page is printed −

<html>
<head>
<style>
   .page-break-right {
      break-before: right; 
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>

   <div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 2. It will be displayed on first page.</p></div>
   <div class="page-break-right"><p>This is a paragraph 3. After applying the break-before: right property, this paragraph will be displayed to the next page on right side when page is printed.</p></div>
   <div><p>This is a paragraph 4. It will be displayed on second page.</p></div>
   <div><p>This is a paragraph 5. It will be displayed on second page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-before - avoid-column Value

The following example demonstrates that break-before: avoid-column property avoids a column break before each section when page is printed −

<html>
<head>
<style>
   main {
      column-width: 200px;
      column-gap: 10px;
   }
   section {
      width: 200px;
      height: 130px;
      border: 2px solid black;
      margin: 10px;
      padding: 5px;
   }
   .break-column {
      break-before: avoid-column;
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>This is a column 1.</p>
      </section>
      <section class="break-column">
         <h3>Column 2</h3>
         <p>This is a column 2.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>This is a column 3.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>This is a column 4.</p>
      </section>
   </main>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS Break column - column Value

The following example demonstrates that break-before: column property add a column break before each section to create the multi-column layout when page is printed −

<html>
<head>
<style>
   main {
      column-width: 200px;
      column-gap: 10px;
   }
   section {
      width: 200px;
      height: 130px;
      border: 2px solid black;
      margin: 10px;
      padding: 5px;
   }
   .break-column {
      break-before: column;
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>This is a column 1.</p>
      </section>
      <section class="break-column">
         <h3>Column 2</h3>
         <p>This is a column 2. After applying break-before: column, this section will be displayed on next column.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>This is a column 3.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>This is a column 4.</p>
      </section>
   </main>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>