CSS properties - page-break-related

revision: March 16, 2024

Content

page-break-after property

- adds a page-break after a specified element.

Tip: the properties: "page-break-before", "page-break-after" and "page-break-inside" help to define how a document should behave when printed.

Note: you cannot use this property on an empty <div> or on absolutely positioned elements.

CSS syntax : page-break-after: auto | always | avoid | left | right | initial | inherit;

Property values:

auto : default. Automatic page-breaks

always : always insert a page-break after the element

avoid : avoid page-break after the element (if possible)

left : insert page-break after the element so that the next page is formatted as a left page

right : insert page-break after the element so that the next page is formatted as a right page

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.pageBreakAfter="always"

                    @media print {
                    footer {page-break-after: always;}
                    }
                

page-break-before property

- adds a page-break before a specified element.

Tip: the properties: "page-break-before", "page-break-after" and "page-break-inside" help to define how a document should behave when printed.

Note: you cannot use this property on an empty <div> or on absolutely positioned elements.

CSS syntax : page-break-before: auto | always | avoid | left | right | initial | inherit;

Property values:

auto : default. Automatic page-breaks

always : always insert a page-break before the element

avoid : avoid page-break before the element (if possible)

left : insert page-break before the element so that the next page is formatted as a left page

right : insert page-break before the element so that the next page is formatted as a right page

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.pageBreakBefore="always"

                @media print {
                    h1 {page-break-before: always;}
                }
            

page-break-inside property

- sets whether a page-break should be avoided inside a specified element.

Tip: the properties: "page-break-before", "page-break-after" and "page-break-inside" help to define how a document should behave when printed.

Note: you cannot use this property on absolutely positioned elements.

CSS syntax : page-break-inside: auto | avoid | initial | inherit;

Property values:

auto : default. Automatic page-breaks

avoid : avoid page-break inside the element (if possible)

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.pageBreakInside="avoid"

                @media print {
                    pre, blockquote {page-break-inside: avoid;}
                }