Page breaks in HTML
Date created: ~1999
There are several strategies you can use to insert page breaks within an HTML document, thus ensuring that the printed document does not break over lines, graphics, etc. There are limitations, however, and these are listed below.
Limitations
- The page-break styles work with the following block elements: BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, Hn, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, UL, XMP.
- Only applicable to Cascading Style Sheets 2 specification
- Only applicable to Internet Explorer 4.x and later at this stage - adding page breaks will not cause any ill effects on other browsers.
- Do NOT try and use within a table - they won't work! See Strategy 6 (below) for breaking a table when printing.
TinyMCE
When you paste from Microsoft Word 2010 page break are represented by
<br style="page-break-before: always;" />
Strategy 1
<style>
.break { page-break-before: always; }
</style>
<body>
content on page 1...
<h1 class="break">text of Heading 1 on page 2</h1>
content on page 2...
<h1 class="break">text of Heading 1 on page 3</h1>
content on page 3...
<p class="break">content on top of page 4</p>
content on page 4...
</body>
Notes about Strategy 1
This example can be part of an external (CSS) or internal style.
Using a class such as .break and not prefacing it with any form of formatting, means that you can add the information wherever you want a page break to occur - including the middle of the text.
Examples:
- If you want the page break to occur before each heading 1, you'd add <h1 class="break"> instead of <h1>. Note that the first <h1>, likely to be on the first page, should probably remain as <h1> and only subsequent <h1>'s need the class attribute.
- If you want to insert a page break part way through the text, then insert <p class= "break">instead of the standard <p> for the text you want to be printed on a new page.
Strategy 2
<style>
h6 {page-break-before: always;}
</style>
Notes about Strategy 2
The reason I used H6 here is that it is a little-used heading for most web pages. By emulating a H1 in font, font size, etc., then adding this code to H6 in addition to the page break information, you can substitute H6 for H1 wherever you want a page break to occur. You can still keep H1 for sections where you don't want to force a page break. Naturally if you want to force a page break at EVERY H1, then you would include the page break information within the H1 style. This strategy can be used with both CSS and internal styles.
Strategy 3
<div style="page-break-before: always">blah blah</div>
Notes about Strategy 3
Make sure you include some text between the <div> opening and closing tags, otherwise this may not work.
Strategy 4
<p style="page-break-before: always">blah blah</p>
Strategy 5
<style>
p.page { page-break-after: always; }
</style>
<body>
content on page 1
<p class="page"></p>
content on page 2
</body>
Notes about Strategy 5
This example can be part of an external (CSS) or internal style.
Strategy 6
...... </tr> </table> </center> </div> <p class="break"><!--Appendix 2 (continued)--></p> <div align="center"><center> [start next table here...]
Notes about Strategy 6
Tables need to be broken in order to force a page break.
In the code in this example, the table has been "chopped" where the break is to occur, a <p> tag inserted with the class attribute added, then the table restarted.
A comment has also been added to alert anybody dealing with the code at a later date that the table is continued.