Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set the page-break behavior inside an element with JavaScript?

Javascript Object Oriented Programming Front End Technology

Use the pageBreakInside property in JavaScript to control page-break behavior inside an element when printing. This property determines whether a page break should occur within an element's content.

Note ? The changes are only visible when printing or viewing the print preview.

Syntax

element.style.pageBreakInside = "value";

Property Values

Value Description
auto Allow page breaks inside the element (default)
avoid Avoid page breaks inside the element if possible
inherit Inherit from parent element

Example: Setting Page Break Behavior

Here's how to control page-break behavior inside elements:

<!DOCTYPE html>
<html>
<head>
   <style>
      .content-box {
         border: 2px solid #333;
         padding: 20px;
         margin: 10px 0;
         height: 200px;
      }
   </style>
</head>
<body>
   <h1>Page Break Inside Example</h1>
   
   <div id="box1" class="content-box">
      <h3>Box 1 (Default behavior)</h3>
      <p>This box allows page breaks inside it.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </div>
   
   <div id="box2" class="content-box">
      <h3>Box 2 (Avoid page breaks)</h3>
      <p>This box tries to avoid page breaks inside it.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </div>
   
   <button onclick="setPageBreaks()">Apply Page Break Settings</button>
   <button onclick="resetPageBreaks()">Reset Settings</button>
   <p><em>Note: Use Ctrl+P to see print preview and observe the differences.</em></p>
   
   <script>
      function setPageBreaks() {
         // Allow page breaks in box1
         document.getElementById("box1").style.pageBreakInside = "auto";
         
         // Avoid page breaks in box2
         document.getElementById("box2").style.pageBreakInside = "avoid";
         
         alert("Page break settings applied! Use Ctrl+P to see print preview.");
      }
      
      function resetPageBreaks() {
         document.getElementById("box1").style.pageBreakInside = "auto";
         document.getElementById("box2").style.pageBreakInside = "auto";
         
         alert("Settings reset to default (auto).");
      }
   </script>
</body>
</html>

Practical Use Cases

Common scenarios where you'd control page breaks inside elements:

<!DOCTYPE html>
<html>
<body>
   <div id="article">
      <h2>Important Article</h2>
      <p>This content should stay together when printing...</p>
   </div>
   
   <table id="dataTable">
      <tr><th>Name</th><th>Value</th></tr>
      <tr><td>Item 1</td><td>100</td></tr>
   </table>
   
   <script>
      // Avoid breaking articles in the middle
      document.getElementById("article").style.pageBreakInside = "avoid";
      
      // Keep table rows together
      document.getElementById("dataTable").style.pageBreakInside = "avoid";
   </script>
</body>
</html>

Browser Compatibility

The pageBreakInside property is supported in all major browsers. However, the effectiveness depends on the browser's print engine and the complexity of your layout.

Conclusion

Use pageBreakInside to control how content splits across printed pages. Set it to "avoid" for content that should stay together, or "auto" for normal page breaking behavior.

Updated on: 2026-03-15T23:18:59+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements