page-break-after does not work in Chrome
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;
}
Google Chrome Printing Page Breaks
I've used the following approach successfully in all major browsers including Chrome:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>
This is a simplified example. In the real code, each page div contains many more elements.
page-break/webkit-region-break not working in chrome anymore?
Make sure the element with page-break-after: always; is a block element. Another selector might be changing it to inline-block or something else which would prevent the break from being applied.
Also make sure the element is not within a floated element. Thanks RoadBump.
CSS Page-Break Not Working in all Browsers
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
- using
page-breakinside tables - floating elements
inline-blockelements- block elements with borders
Related Topics
Create Line After Text with CSS
Bootstrap 4 Align Elements Right Inside a Col Div
CSS Counter-Reset on Nested List
Rounding Numbers in SASS and Adjusting the Amount of Decimals
Add SCSS File to the Stackblitz
Css-Grid: Bleed Background Outside Container
CSS Shorthand to Identify Multiple Classes
Sass - Converting Hex to Rgba for Background Opacity
Responsive Image Full Screen and Centered - Maintain Aspect Ratio, Not Exceed Window
Chrome Get "User Agent Stylesheet"
CSS Hell Simulating Table with Div
-Webkit-Transform-Style: Preserve-3D Not Working
Inherited Text-Decoration Style
Css, Change Less Variable with @Media
Css3 Backgrounds - Multiple Background-Size Properties