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-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;
}
Page-Break-inside property is not working in chrome
Instead of putting the page-break-inside:avoid; on you table's tr, try applying it on the table directly like this:
table {
page-break-inside:avoid;
position:relative;
}
also add this media query:
@media print {
table {
page-break-inside:avoid;
position:relative;
}
}
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.
Related Topics
How to Combine Multiple CSS Rules
Why Is My Element Not Sticking to The Left When Using Position Sticky in CSS
HTML List Isn't Vertically Aligned When Using Floating Images
Trying to Center Div Horizontally and Vertically in Screen
Fill a Div with an Image Respecting Aspect Ratio
Where Is The Visual Studio HTML Designer
How to Set Different Colors in HTML in One Statement
What Happens If I Don't Put a <!Doctype HTML> in My Code? Will It Make Any Major Changes
Web Link to Specific Whatsapp Contact
How to Test a Website for Retina on Windows Without an Actual Retina Display
Hide Email Address from Bots - Keep Mailto:
Draw Single Pixel Line in HTML5 Canvas
How to Stop an Image Displaying Outside of The Div
Having Trouble with Attribute != Selector
Inject <Input> in Innerhtml Angular 2
Svg Line Markers Not Updating When Line Moves in Ie10