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

You are here: Reference > CSS > properties > page-break-inside

page-break-inside property

Browser support:

8

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

Note: The page-break-inside property is supported in Internet Explorer from version 8.

The page-break-inside 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 page-break-before and page-break-after properties.

JavaScript page for this property: pageBreakInside. You can find other example(s) there.

Possible values:

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>