CSS properties - break-after, -before, -inside

revision: December 15, 2024

Content

break-after property

- specifies whether or not a page break, column break, or region break should occur after the specified element. The break-after property extends the CSS2 page-break-after property.

Using break-after, you can tell the browser to break the page, column, or region after the element the "break-after" property is applied to, or avoid the element to be split and span across two pages.

CSS syntax : break-after: auto | all | always | avoid | avoid-column | avoid-page | avoid-region | column | left | page| recto |region | right | verso | initial | inherit;

Property values

auto : default. Automatic page/column/region break after the element

all : always insert a page-break right after the principal box

always : always insert a page-break after the element

avoid : avoid a page/column/region break after the element

avoid-column : avoid a column-break after the element

avoid-page : avoid a page-break after the element

avoid-region : avoid a region-break after the element

column : always insert a column-break after the element

left : insert one or two page-breaks after the element so that the next page is formatted as a left page

page : always insert a page-break after the element

recto : insert one or two page-breaks after the principal box so that the next page is formatted as a recto page

region : always insert a region-break after the element

right : insert one or two page-breaks after the element so that the next page is formatted as a right page

verso : insert one or two page-breaks after the principal box so that the next page is formatted as a verso page

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

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

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

                    @media print {
                    .region ul { break-after: region;}
                    }
                

break-before property

- specifies whether or not a page break, column break, or region break should occur before the specified element. The break-before property extends the CSS2 page-break-before property.

Using break-before, you can tell the browser to break the page, column, or region before the element the "break-before" property is applied to, or avoid the element to be split and span across two pages.

CSS syntax : break-before: auto | all | always | avoid | avoid-column | avoid-page | avoid-region | column | left | page| recto |region | right | verso | initial | inherit;

Property values

auto : default. Automatic page/column/region break before the element

all : always insert a page-break right before the principal box

always : always insert a page-break before the element

avoid : avoid a page/column/region break before the element

avoid-column : avoid a column-break before the element

avoid-page : avoid a page-break before the element

avoid-region : avoid a region-break before the element

column : always insert a column-break before the element

left : insert one or two page-breaks before the element so that the next page is formatted as a left page

page : always insert a page-break before the element

recto : insert one or two page-breaks before the principal box so that the next page is formatted as a recto page

region : always insert a region-break before the element

right : insert one or two page-breaks before the element so that the next page is formatted as a right page

verso : insert one or two page-breaks before the principal box so that the next page is formatted as a verso page

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

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

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

                        @media print {
                        .region ul { break-before: region;}
                        }
                    

break-inside property

- specifies whether or not a page break, column break, or region break should occur inside the specified element. The break-inside property extends the CSS2 page-break-inside property.

With break-inside, you can tell the browser to avoid breaks inside images, code snippets, tables, and lists.

CSS syntax : break-inside: auto | all | always | avoid | avoid-column | avoid-page | avoid-region | column | left | page| recto |region | right | verso | initial | inherit;

Property values

auto : default. Automatic page/column/region break inside the element

all : always insert a page-break right inside the principal box

always : always insert a page-break inside the element

avoid : avoid a page/column/region break inside the element

avoid-column : avoid a column-break inside the element

avoid-page : avoid a page-break inside the element

avoid-region : avoid a region-break inside the element

column : always insert a column-break inside the element

left : insert one or two page-breaks inside the element so that the next page is formatted as a left page

page : always insert a page-break inside the element

recto : insert one or two page-breaks inside the principal box so that the next page is formatted as a recto page

region : always insert a region-break inside the element

right : insert one or two page-breaks inside the element so that the next page is formatted as a right page

verso : insert one or two page-breaks inside the principal box so that the next page is formatted as a verso page

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

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

                        @media print {
                            img {display: block; break-inside: avoid;}
                        }
                    

                        @media print {
                        .region ul { break-inside: avoid;}
                        }