Page Break While Printing in HTML

1. Set the page-break-after Property to always Inside @media print to Page Break in HTML
2. Set the page-break-before Property to always Inside @media print to Page Break in HTML
3. Set the break-after Property to page to Page Break in HTML

This article will explain a few methods to force a page break while printing HTML content.

Set the page-break-after Property to always Inside @media print to Page Break in HTML

CSS’s @media print rule lets us apply the rules while printing the HTML content. We can change the styles with this rule.

We can use JavaScript to create an onclick() event that prints the specified HTML contents. The window.print() method prints the current window.

We can use the onclick() event to invoke this method.

In CSS, using @media print, we can set the page-break-after property to always for an HTML element to page break from that point.

For example, create two headings using the h1 tag. Name the first heading as Before page break and the other as After page break.

Give the first heading a class name of break-page. Then create a button, Print and add an onclick listener for the button and call the window.print() method.

Select the break-page class inside the @media print rule in the CSS section. Next, set its page-break-after property to always.

The example below shows that after we click the Print button, the heading Before page break appears on the first page, whereas the second heading and the button appear on the second page while printing. We can use the page-break-after property to page break while printing HTML.

Example code:

<h1 class="break-page">Before page break </h1>
<h1>After page break</h1>
<button onclick="window.print()">Print</button>

@media print {
    .break-page {
        page-break-after: always;
    }
}

Demo

Set the page-break-before Property to always Inside @media print to Page Break in HTML

This method is quite similar to the previous one. The difference is we are using the page-break-before property.

It is used similarly in the @media print rule. This method makes the page break before the HTML content, where we have used the page-break-before property.

For example, create two headings just like in the first method. This time, give the second heading the class name break-page.

Next, create a button with an onclick listener that invokes the window.print() method. In the CSS section, inside @media print, select the break-page class and set its page-break-before property to always.

The page break will appear before the second heading, After page break when clicking the Print button.

Example code:

<h1>Before page break </h1>
<h1 class="break-page">After page break</h1>
<button onclick="window.print()">Print</button>

@media print {
    .break-page {
        page-break-before: always;
    }
}

Set the break-after Property to page to Page Break in HTML

We can set the break-after property of an element to page to break the page in HTML. It will break the page after the element where the property is used.

Then, we can print the HTML pages using the window.print() as in the methods above. This method differs from the methods above because it does not use the @media print rule.

For example, create two headings as usual. Between the headings, create an empty div and give it a class name of break-page.

Next, create a clickable button with the onclick listener that calls the window.print() method.

Select the break-page class and set its break-after property to page in the CSS.

The page breaks after the first heading while printing. In this way, we can use the break-after property to break the page in HTML.

Example Code:

<h1>
Before page break
</h1>
<div class="break-page"></div>
<h1>
After page break
</h1>
<button onclick="window.print();" />Print</button>

.break-page {
    break-after: page;
}