HTML DOM Style pageBreakBefore Property

The HTML DOM Style pageBreakBefore property returns and modify the page-break behavior for printing or print preview before an HTML element in an HTML document.

Syntax

Following is the syntax −

1. Returning pageBreakBefore

object.pageBreakBefore

2. Modifying pageBreakBefore

object.pageBreakBefore = “value”

Here, value can be −

Value	Explanation
Initial	It set this property value to its default value.
inherit	It inherits this property value from its parent element
auto	It insert a page break before the element in an HTML document if necessary.
always	It always insert a page break before the element in an HTML document.
avoid	It avoid a page break before the element in an HTML document.
left	In it the next page can be considered as a left page when one or two page breaks are inserted before the element
right	In it the next page can be considered as a right page when one or two page breaks are inserted before the element.
Empty string(“”)	It doesn’t insert a page break before the element in an HTML document.

Let us see an example of HTML DOM Style pageBreakBefore Property −

Example

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   p {
      text-align: center;
   }
</style>
<body>
<h1 style="text-align:center">DOM Style pageBreakBefore Property Demo</h1>
<p>
Hi! I'm a para element with some dummy text. Hi! I'm a para element with some dummy text.
</p>
<p class="page-break">
Hi! I'm second para element with some dummy text. Hi! I'm a second element with some dummy text.
</p>
<button onclick="set()" class="btn">Break Page Here</button>
<p>
Hi! I'm another para element with some dummy text. Hi! I'm another para element with some dummy text.
</p>
<script>
   function set() {
      document.querySelector(".page-break").style.pageBreakBefore = "always";
   }
</script>
</body>
</html>

Output

HTML DOM Style pageBreakBefore Property

Now open print preview and observe how our html page would be displayed.

HTML DOM Style pageBreakBefore Property

Now Click on the “red” button available on the web page and then again open the print preview to observe our webpage again. Here you can clearly see that our web page gets split into two pages.

HTML DOM Style pageBreakBefore Property