17

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?

atonyc
  • 2,207
  • 2
  • 19
  • 25
Deathlex
  • 174
  • 1
  • 2
  • 10

5 Answers5

13

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;
}
M Zeinstra
  • 1,931
  • 4
  • 17
  • 46
8

Please note for page-break to work, div should not have any float!

So if your div has say float:left , reset it for print saying: float: none and it will make page break work again.

Muhammad Asadullah
  • 3,735
  • 1
  • 22
  • 38
5

It should not be inside a flex div. If it is, page break does not work unless flex div is closed.

Ex:

   <div class="row">
           //bla bla    
   </div>/*close old flex div*/
    <div class="col-12 p-0 display-block break-before"></div>
    <div class="row">/*new flex div*/
              //bla bla
    </div>
    <style>
    .break-before {
        display: block;
        position: relative;
        page-break-before: always !important;   
    }
    </style>
Hakan
  • 240
  • 3
  • 4
2

I couldn't get the previous answers to work in Chrome in October 2019. It now seems to be the case that break-before: page has to be used rather than break-before: always.

This also works in FF, but so do previous answers.

<div>
  <div class="break-before">
    Page 1
  </div>
  <div class="break-before">
    Page 2
  </div>
</div>

.break-before {
  break-before: page;
}
t k
  • 387
  • 3
  • 9
0

in my case i had button row and i wanted to break into 2 lines with 3rd button so i used this

button:nth-of-type(3) {
   page-break-after: right;
}

but this didn't work with chrome because it is a flex (i think)

so as alternative i used grid like this

.partent-class-options {
   display:grid;
   grid-template-columns: 1fr 1fr 1fr;
}

this is only alternative but not accurate like break-after as you know this will not work for the patterns like first row contain 3 options and second one contains more than 3 ✌️

hexhad
  • 1,139
  • 12
  • 14