page-break-after does not work in Chrome

后端未结

关注

 3  2054

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:

相关标签:

3条回答

面向向阳花

2020-12-11 02:42
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;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
予麋鹿

2020-12-11 02:45

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

暗喜

2020-12-11 02:46

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

0 讨论(0)