CODEWITHSUNDEEP
htmlcssgoogle-chromepage-break
Deathlex
Deathlex

Reputation: 184

page-break-after does not work in Chrome

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?

Upvotes: 17

Views: 32959

Answers (5)

hexhad
hexhad

Reputation: 1283

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 ✌️

Upvotes: 0

Hakan
Hakan

Reputation: 599

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>

Upvotes: 5

t k
t k

Reputation: 407

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

Upvotes: 2

Muhammad Asad
Muhammad Asad

Reputation: 3793

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.

Upvotes: 8

M Zeinstra
M Zeinstra

Reputation: 1981

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

Upvotes: 14

Related Questions