pageBreakInside Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:pageBreakInside

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

Description

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

The pageBreakInside 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
autoInsert a page break inside the element if necessary. This is default
avoid Avoid a page break inside an element
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 inside an element when printing
CSS VersionCSS2

Avoid a page break inside the <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  w  w .ja v  a2s . c  o  m*/
    document.getElementById("footer").style.pageBreakBefore = "avoid";
}
</script>

</body>
</html>

Related Tutorials