Menu
I can not seem to find a consistent method to create a page break that will work across word, internet explorer and chrome.
The following example (from Google Chrome Printing Page Breaks) will create page breaks properly for both Chrome and Internet explorer, but does not have page breaks in word.
<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>
After messing around with word I have discovered you can get word to add a page break with the following:
<br style="ms-special-character:line-break;page-break-before:always" />
The problem here is that internet explorer also see's this as a page break, so if you combine the methods, Chrome and Word have page breaks properly, but Internet Explorer inserts two page breaks. If you use just one then either chrome and explorer is right and word is not and so on.
483
To suggest a page break, add <P style="page-break-before: always"> before the beginning of a new printed page. For example, if you place the following tags on a HTML page and print it using a compatible browser, you will end-up with three pages with the sample text. This is the text for page #1. Listing #1 : HTML code.
page-break-before: auto instead of . page-break-before: always. The "auto" will break the page only if the contents are at the end if the page, this will prevent breaking the page and leaving a lot of blank space.
To fix this just change it to page-break-after:auto. It will break correctly and not create an extra blank page.
We can add a page break tag with style "page-break-after: always" at the point where we want to introduce the pagebreak in the html page.
Try this:
<!--[if IE]>
<br>
<![endif]-->
<!--[if !IE]>
<br style="ms-special-character:line-break;page-break-before:always" />
<br>
<![endif]-->
Does that fit your needs? (Note, those work in plain old html. I tested in Chrome and MS Word (along with IE) and they worked fine.)
144
This is a difference between IE8 and IE9 (provided IE9 is in standards mode), so you need to differentiate between those browsers somehow - either with a conditional comment, or a CSS hack such as this:
div.page:not(.dummy)
{
page-break-after: always;
page-break-inside: avoid;
}
(Tested in Chrome, Firefox, OpenOffice Writer [hopefully an adequate substitute for Word] and IE 7,8,9)
For protection against browsers that both apply page breaks on br and understand :not, you could add this, though I don't know of any browser that needs it:
br:not(.dummy)
{
page-break-before: auto;
}
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
