When a viewer prints your page, the printer will arbitrarily break the page wherever it must. Images may be cut in two, paragraphs split, and in some cases, lines split.
You can send a signal to the viewer's printer telling it where to break the page for printing purposes. Note: this will not break the page for viewing purposes.
To force a page break above an element, associate a page-break-before:always style declaration with the element. Likewise, to break a page after an element, associate page-break-after:always with the element. This does not work on all browsers, so test with your favorites. It does work in Internet Explorer. However, there is no harm in using it since it will not change the appearance of the page in other browsers, thus it can only help. For example:
<p style="page-break-before:always">Equaduphus scu cro vadabres ma apaphus est. Cosm litaquoron quidemaquadat, si snism vuh ilotat. Cresch est.</p>
. . .
In the example above, a page break will occur before the associated paragraph. A class can be specified to do the same thing:
<style type="text/css">
<!--
.endPage { page-break-after:always }
-->
</style>
. . .
Now, anywhere you want to add a page break, just add a <br class="endPage">.
Possible values for this property are 'auto' (the default value), 'always', 'left' and 'right'. Left and Right assume the browser is equipped to detect left-facing from right-facing pages for double-sided printing.
Using Internet Explorer, open the files you produced so far, and check the "Print Preview" on each. Will the pages break where you want them to? Add one of these declarations on a page, and preview it again. Notice where the page now breaks.
- In this lesson, we learned about these Style properties:
- page-break-before
- page-break-after
