pageBreakBefore Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:pageBreakBefore

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. pageBreakBefore

Description

The pageBreakBefore property sets or gets the page-break behavior before an element for printing or print preview.

The pageBreakBefore property has no effect on absolutely positioned elements.

The page break is only visible in a print preview or when printing.

Property Values

Value Description
auto Insert a page break before the element if necessary. Default
alwaysAlways insert a page break before the element
avoid Avoid a page break before the element
'' (empty string) Page break is not inserted before the element
left Insert one or two page breaks before the element, so the next page is considered a left page
right Insert one or two page breaks before the element, so the next page is considered a right page
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: auto?
Return Value: A String, representing the page-break behavior before an element when printing
CSS VersionCSS2

Always set a page break before each <p> element with id="footer":

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="footer">This is a footer paragraph.</p>

<button type="button" onclick="myFunction()">Test</button>

<p>Click the button above and see the changes in print or print preview.</p>

<script>
function myFunction() {/*from  w ww  . j  ava  2 s.c o m*/
    document.getElementById("footer").style.pageBreakBefore = "always";
}
</script>

</body>
</html>

Related Tutorials