Page-break-after Does Not Work In Chrome

Question

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:

<body><mainrole="main"><sectionclass="tabs"><divclass="tabbed-content"><divclass="break-after">Page 1</div><divclass="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;
}

Solution 2:

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.

Solution 3:

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*/
    <divclass="col-12 p-0 display-block break-before"></div><divclass="row">/*new flex div*/
              //bla bla
    </div><style>.break-before {
        display: block;
        position: relative;
        page-break-before: always !important;   
    }
    </style>

Solution 4:

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><divclass="break-before">
    Page 1
  </div><divclass="break-before">
    Page 2
  </div></div>

.break-before {
  break-before: page;
}

Html5 Cafe

Page-break-after Does Not Work In Chrome

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Page-break-after Does Not Work In Chrome"