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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content