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

pageBreakAfter style property

Browser support:
Specifies or returns whether a page break occurs after the object when printing.
This property doesn't take any 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 pageBreakInside properties.

Syntax:

object.pageBreakAfter;
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-after

Possible values:

The type of this property is string.
 One of the following values: 
always
Always force a page break after the element.
auto
Default. Insert a page break after the element when necessary.
avoid
Avoid a page break after the current element.
empty string
Page break is not inserted after the element.
inherit
Takes the value of this property from the computed style of the parent element.
left
Force one or two page breaks after the current element, so that the next page is considered a left page.
right
Force one or two page breaks after the current element, so that the next page is considered a right page.
Default: auto.

Example HTML code 1:

This example illustrates the use of the page-break-after property:
<head>
    <style>
        .example {
            page-break-after: always;
        }
    </style>
</head>
<body>
    Please open the print preview to see the result!
    <p class="example">page break after this element</p>
    text content
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the pageBreakAfter property in JavaScript:
<head>
    <style>
        h1 {
            page-break-after: always;
        }
    </style>

    <script type="text/javascript">
        function ChangePageBreak (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected option value
            var breakRule = selectTag.options[whichSelected].value;

            // Rules within the first styleSheet
            var sheet = document.styleSheets[0];
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;

            // Set the page-break for h1 CSS rule
            rules[0].style.pageBreakAfter = breakRule;
        }
    </script>
</head>
<body>
    Content before the header
    <h1>Header element</h1>
    Content after the header

    <br /><br />
    <span style="color:#FF0000;">Please open the print preview to see the page break rules in action.</span>
    <br /><br />

    <select onchange="ChangePageBreak (this);" size="5">
        <option selected="selected" value="always" />always
        <option value="auto" />auto
        <option value="" />empty string
        <option value="left" />left
        <option value="right" />right
    </select>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content