Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
Now open print preview and observe how our html page would be displayed.
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.
Updated on: 01-Oct-2019
14 Views
Advertisements