page-break-after does not work in Chrome

html css google-chrome page-break
Deathlex picture Deathlex · Mar 8, 2016 · Viewed 21.7k times · Source

I have a problem with page-break-after in Google Chrome during printing. It seems that it's not working. I tried Firefox and it's ok there. My code is:

<div style="position: relative; display: block;">

    <div style="display: block; page-break-after: always; position: relative;">Page 1</div>

    <div style="display: block; position: relative; page-break-before:always;">Page 2</div>

</div>

Is there any trick to get it done in Chrome?

Answer

M Zeinstra picture M Zeinstra · Mar 8, 2016

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;
}

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

I have this problem. Chrome continues to return this error Resource interpreted as stylesheet but transferred with MIME type text/html The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported …

Read More
Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More