Style pageBreakInsideProperty

Style 对象参考手册Style Object

Definition and Usage

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

Note:The pageBreakInside property does not affect absolutely positioned elements.

Syntax

Set the pageBreakInside property:

Object.style.pageBreakInside="auto|avoid|inherit"

Return the pageBreakInside property:

Object.style.pageBreakInside

Value Description
auto Default. Inserts a page break inside the element if necessary.
avoid Avoids inserting a page break inside the element.
inherit The value of the pageBreakInside property is inherited from the parent element.


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

All major browsers support the pageBreakInside property.

Note:IE7 and earlier do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".

Note:Firefox, Chrome, and Safari do not support the "avoid" value.


Tips and Notes

Tip:Avoid page-break properties inside tables, floating elements, and block elements with borders.


Example

Example

Avoid a page break inside the <p> element with id="footer":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function setPageBreak(){
    document.getElementById("footer").style.pageBreakInside="avoid";
}
</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()">Avoid page break in footer paragraph</button>

</body>
</html>

Try it Yourself »


Style 对象参考手册Style Object Other Extensions