CSS Paged Media - break-after Property

CSS break-after paged media property specifies whether a page break should occur after 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 break-after paged media property:

Generic Break Values

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

Page Break Values

avoid-page − It prevents the page break after the element.
page − This value always inserts a new page after the element.
left − Forces a page break after the element so that the next page is formatted as a left page.
right − Forces a page break after the element so that the next page is formatted as a right page.

Column Break Values

avoid-column − To avoid a column break after an element.
column − To add a column break after an element.

Applies to

Block-level elements.

DOM Syntax

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

Page Break Aliases

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

page-break-after	break-after
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-after - auto Value

The following example demonstrates that the break-after: auto property automatically break the section to the new page when page is printed −

<html>
<head>
<style>
   main {
      height: 50px;
      width: 150px;
   }
   section {
      break-after: 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-after - avoid Value

The following example demonstrates that break-after: avoid property avoids page breaks after the section when page is printed −

<html>
<head>
<style>
   main {
      height: 50px;
      width: 180px;
   }
   section {
      break-after: 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-after - avoid-page

The following example demonstrates how break-after: avoid-page property avoids the page break after an element printing the page:

<html>
<head>
<style>
   .avoid-break-page {
      break-after: 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-after - page Value

The following example demonstrates that break-after: page property break the element to new page in printed layout −

<html>
<head>
<style>
   .break-page {
      break-after: 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. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 3. After applying the break-after property, this paragraph will be displayed on the 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-after - left Value

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

<html>
<head>
<style>
   .page-break-left {
      break-after: 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. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 4. After applying the break-after: 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 5. It will be displayed on second page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-after - right Value

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

<html>
<head>
<style>
   .page-break-right {
      break-after: 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. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 4. After applying the break-after: 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 5. It will be displayed on second page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-after - column Value

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

<html>
<head>
<style>
   main {
      column-count: 3;
      column-gap: 20px; 
   }
   section {
      break-after: column; 
      border: 1px solid black;
      padding: 5px;
   }
   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>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 2</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 5</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 6</h3>
         <p>CSS break-after: column example.</p>
      </section>
   </main>
<script>
   function printPage() {
      window.print();
   }
</script>
</body>
</html>

CSS break-after - avoid-column Value

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

<html>
<head>
<style>
   main {
      column-count: 3;
      column-gap: 20px; 
   }
   section {
      break-after: avoid-column; 
      border: 1px solid black;
      padding: 5px;
   }
   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>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 2</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 5</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 6</h3>
         <p>CSS break-after: column example.</p>
      </section>
   </main>
<script>
   function printPage() {
      window.print();
   }
</script>
</body>
</html>