CSS Paged Media - break-inside Property

CSS break-inside paged media property is used to break the page, column, or region inside an element when the content is in printed page mode.

Possible Values

  • auto − The default value. It allows breaks inside the element according to the fragmentation context.

  • avoid − Avoids breaks inside the element, forcing the content to stay within a single fragment.

  • avoid-page − Avoids breaks inside the element specifically for paged media.

  • avoid-column − Avoids breaks inside the element specifically for multi-column layout.

  • avoid-region − Avoids breaks inside the element specifically for CSS Regions. This is experimental as of today and expected to change in future.

Applies to

Block-level elements.

DOM Syntax

breakInside = "auto|avoid|avoid-page|avoid-column|avoid-region";

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.

Page Break Aliases

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

page-break-inside break-inside
auto auto
avoid avoid

CSS break-inside - auto Value

The following example demonstrates that break-inside: auto property breaks the paragraph inside the column when page is printed −

<html>
<head>
<style>
   ul {
      column-width: 150px;
      column-gap: 20px;
   }
   li {
      list-style-type: none;
   }
   p {
      break-inside: auto; 
      border: 3px solid black;
      padding: 5px;
      margin: 5px;
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>Click on below button to see the effect when you print the page.</h3>
   <button onclick="printPage()">Print Page</button>
   <ul>
      <li> <p>This is first paragraph.</p></li>
      <li><p>This is second paragraph.</p></li>
      <li><p>This is third paragraph.</p></li>
      <li><p>This is fourth paragraph.</p></li>
      <li><p>This is fifth paragraph.</p></li>
      </ul>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-inside - avoid Value

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

<html>
<head>
<style>
   ul {
      column-width: 150px;
      column-gap: 20px;
   }
   li {
      list-style-type: none;
   }
   p {
      break-inside: avoid; 
      border: 3px solid black;
      padding: 5px;
      margin: 5px;
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>Click on below button to see the effect when you print the page.</h3>
   <button onclick="printPage()">Print Page</button>
   <ul>
      <li> <p>This is first paragraph.</p></li>
      <li><p>This is second paragraph.</p></li>
      <li><p>This is third paragraph.</p></li>
      <li><p>This is fourth paragraph.</p></li>
      <li><p>This is fifth paragraph.</p></li>
      </ul>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-inside - avoid-page Value

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

<html>
<head>
<style>
   div {
      break-inside: avoid-page;
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
   }
   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-inside - avoid-column Value

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

<html>
<head>
<style>
   main {
      column-width: 200px;
      column-gap: 10px;
   }
   section {
      width: 200px;
      height: 100px;
      border: 2px solid black;
      margin: 10px;
      padding: 5px;
      break-inside: 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>
         <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>
Advertisements