Style pageBreakBeforeProperty
Style Object
Definition and Usage
The pageBreakBefore property sets or returns the page-breaking behavior before an element (used for printing or print preview).
Note:The pageBreakBefore property does not affect absolutely positioned elements.
Syntax
Set the pageBreakBefore property:
Object.style.pageBreakBefore="auto|always|avoid|emptystring|left|right|inherit"
Return the pageBreakBefore property:
Object.style.pageBreakBefore
| Value | Description |
|---|---|
| auto | Default. Inserts a page break before the element if necessary. |
| always | Always insert a page break before the element. |
| avoid | Avoid inserting a page break before the element. |
| "" (empty string) | Do not insert a page break before the element. |
| left | Insert one or two page breaks before the element until a blank left page is reached. |
| right | Insert one or two page breaks before the element until a blank right page is reached. |
| inherit | The value of the pageBreakBefore property is inherited from the parent element. |
Browser Support
All major browsers support the pageBreakBefore property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Always set a page break before every `<p>` element with id="footer":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
`<title>Example (example.com)</title>`
<script>
function setPageBreak(){
document.getElementById("footer").style.pageBreakBefore="always";
}
</script>
</head>
<body>
`<h1>This is a heading</h1>`
`<p>This is a paragraph</p>`
`<p id="footer">This is the footer paragraph</p>`
`<button type="button" onclick="setPageBreak()">Set page break before the footer paragraph</button>`
`<p>Click the button above to see the changes in print or print preview.</p>`
</body>
</html>
<html>
<head>
<meta charset="utf-8">
`<title>Example (example.com)</title>`
<script>
function setPageBreak(){
document.getElementById("footer").style.pageBreakBefore="always";
}
</script>
</head>
<body>
`<h1>This is a heading</h1>`
`<p>This is a paragraph</p>`
`<p id="footer">This is the footer paragraph</p>`
`<button type="button" onclick="setPageBreak()">Set page break before the footer paragraph</button>`
`<p>Click the button above to see the changes in print or print preview.</p>`
</body>
</html>
Try it Yourself »
Style Object Other Extensions