Menu
In order to change Chrome default print margins, all you'll have to do is change the margins settings to your preference and it will become the default print margins. To change the print margins settings in Google Chrome, this is what you'll need to do: Enter the Chrome print preview page (Shortcut: Ctrl+P):
Step 1: Click the three dots on the upper right corner of your Google Chrome browser to expand the More Options list. Step 2: Select Print. Step 3: Click on More Settings. Step 4: Select the correct paper size from the dropdown.
The page-break-after property adds a page-break after a specified element. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on an empty <div> or on absolutely positioned elements.
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.
Actually one detail is missing from the answer that is selected as accepted (from Phil Ross)....
it DOES work in Chrome, and the solution is really silly!!
Both the parent and the element onto which you want to control page-breaking must be declared as:
position: relative
check out this fiddle: http://jsfiddle.net/petersphilo/QCvA5/5/show/
This is true for:
page-break-before
page-break-after
page-break-inside
However, controlling page-break-inside in Safari does not work (in 5.1.7, at least)
i hope this helps!!!
PS: The question below brought up that fact that recent versions of Chrome no longer respect this, even with the position: relative; trick. However, they do seem to respect:
-webkit-region-break-inside: avoid;
see this fiddle: http://jsfiddle.net/petersphilo/QCvA5/23/show
so i guess we have to add that now...
Hope this helps!
I just wanted to note here that Chrome also ignores page-break-* css settings in divs that have been floated.
I suspect there is a sound justification for this somewhere in the css spec, but I figured noting it might help someone someday ;-)
Just another note: IE7 can't acknowledge page break settings without an explicit height on the previous block element:
http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/
I had an issue similar to this but I found the solution eventually. I had overflow-x: hidden; applied to the <html> tag so no matter what I did below in the DOM, it would never allow page breaks. By reverting to overflow-x: visible; it worked fine.
Hopefully this helps somebody out there.
I'm having this problem myself - my page breaks work in every browser but Chrome - and was able to isolate it down to the page-break-after element being inside a table cell. (Old, inherited templates in the CMS.)
Apparently Chrome doesn't honor the page-break-before or page-break-after properties inside table cells, so this modified version of Phil's example puts the second and third headline on the same page:
<!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>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
Chrome's implementation is (dubiously) allowed given the CSS specification - you can see more here: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en
Beware of CSS : display:inline-block when printing.
None of the CCS property to go to next page would work for me in Chrome and Firefox if my table was inside a div with the style display:inline-block
For example, the following doesn't work :
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
But the following work :
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
2016 update:
Well, I got this problem, when I had
overflow:hidden
on my div.
After I made
@media print {
div {
overflow:initial !important
}
}
everything became just fine and perfect
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With