In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > pageBreakInside

pageBreakInside style property

Browser support:

8

Specifies or returns the page-breaking behavior that should occur inside an element's rendering box when printing.

Note: The pageBreakInside property is supported in Internet Explorer from version 8.

The pageBreakInside property has no effect on absolutely positioned elements. The page break is only visible in a print preview or when printing. If you need other page breaking rules, use the pageBreakBefore and pageBreakAfter properties.

Syntax:

object.pageBreakInside;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: page-break-inside

Possible values:

The type of this property is string.

One of the following values:

auto

Default. Insert a page break inside the element when necessary.

avoid

Avoid a page break inside the current element.

inherit

Takes the value of this property from the computed style of the parent element.

Default: auto.

Example HTML code 1:

This example illustrates the use of the page-break-inside property:

<head>
    <style>
        .allowPageBreak {
            color: green;
            border: 1px solid green;
        }
        .avoidPageBreak {
            page-break-inside: avoid;
            color: red;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="allowPageBreak">
        Page breaks are allowed.
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Page breaks are allowed.
    </div>
    <div class="avoidPageBreak">
        Try to avoid page breaks.
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Try to avoid page breaks.
    </div>
    <div class="allowPageBreak">
        Page breaks are allowed.
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Page breaks are allowed.
    </div>
    <div class="avoidPageBreak">
        Try to avoid page breaks.
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Try to avoid page breaks.
    </div>
    <div class="allowPageBreak">
        Page breaks are allowed.
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Page breaks are allowed.
    </div>
    <div class="avoidPageBreak">
        Try to avoid page breaks.
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Try to avoid page breaks.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the pageBreakInside property in JavaScript:

<head>
    <style>
        .allowPageBreak {
            color: green;
            border: 1px solid green;
        }
        .avoidPageBreak {
            page-break-inside: avoid;
            color: red;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript">
        function AllowPageBreak () {
            var redDiv = document.getElementById ("redDiv");
            redDiv.style.pageBreakInside = "auto";
        }
    </script>
</head>
<body>
    <button onclick="AllowPageBreak ()">Allow page breaks inside the element with red border</button>
    <div class="allowPageBreak">
        Page breaks are allowed.
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Page breaks are allowed.
    </div>
    <div class="avoidPageBreak" id="redDiv">
        Try to avoid page breaks.
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Try to avoid page breaks.
    </div>
</body>