pageBreakAfter Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:pageBreakAfter

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

Description

The pageBreakAfter property sets or gets the page-break after an element for printing or print preview.

The pageBreakAfter 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 after the element if necessary. Default
alwaysAlways insert a page break after the element
avoid Avoid a page break after the element
'' (empty string) Page break is not inserted after the element
left Insert one or two page breaks after the element, so the next page is considered a left page
right Insert one or two page breaks after 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 after an element when printing
CSS VersionCSS2

Always set a page break after 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() {/*w  ww  .j av a2s  .  c om*/
    document.getElementById("footer").style.pageBreakAfter = "always";
}
</script>

</body>
</html>

Related Tutorials