Css Page-Break Not Working in All Browsers

CSS Page-Break Not Working in all Browsers

Parent elements can not have float on them.

Setting float:none on all parent elements makes page-break-before:always work correctly.

Other things that can break page-break are:

using page-break inside tables
floating elements
inline-block elements
block elements with borders

page-break-after does not work in Chrome

It is a hack, but Chrome doesn't support page-breaks very well. So try to use this instead:

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="break-after">Page 1</div>
                <div class="break-before">Page 2</div>
            </div>
        </section>
    </main>
</body>

And add this to your css:

html, body, .main, .tabs, .tabbed-content { float: none; }

.break-after {
    display: block;
    page-break-after: always;
    position: relative;
}

.break-before {
    display: block;
    page-break-before: always;
    position: relative;
}

page-break-before: always not working as intended after updating chrome from v97 to v98

(1) Meh Option - Changing Margins: from None to either Default or Minimum seems to resolve our issue... We prefer None for saving pages on our site to PDF without a white border around the page, however Default looks just fine otherwise and we can use this.

(2) Better Option - Adding width: 100.25% to the div with class controller-navbar-container fixes this issue on this page and on every other page on the site as well. I am not sure why this is the case.

Page break not breaking

I found the answer

display: flex;
justify-content: center;
font-size: 10px;

I have this in my parent div as style when i remove it it works. Although i dont know why. I hope someone has the answer why this style is not letting the page break to work

page-break/webkit-region-break not working in chrome anymore?

Make sure the element with page-break-after: always; is a block element. Another selector might be changing it to inline-block or something else which would prevent the break from being applied.

Also make sure the element is not within a floated element. Thanks RoadBump.

Css Page-Break Not Working in All Browsers