CSS page-break-after Property

February 10, 2021 12:37 pm IST

You are Here:

CSS page-break-after Property

CSS page-break-after property adds a page-break after a specified element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> @media print { p{ page-break-after: always; } } </style> </head> <body> <h1>CSS page-break-after property</h1> <p>This page will break after this paragraph.</p> <p>This page will break after this paragraph.</p> <button onclick="window.print()">Print</button> </body> </html>

Run

Syntax

Using CSS

element{ page-break-after: always; }

Using Javascript

object.style.pageBreakAfter="always";

Animatable

No, page-break-after property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS page-break-after property is auto.

Property Value

The following table provides a list of values for CSS page-break-after property.

Value	Explanation
auto	Automatic page breaks.
left	Force page breaks after the element so that the next page is formatted as a left page.
right	Force page breaks after the element so that the next page is formatted as a right page.
avoid	Avoid page breaks after the element.
always	Always force page breaks after the element.

Using JavaScript

In the following example, we will demonstrate how to set the CSS page-break-after property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS page-break-after property</h1> <p>This page will break after this paragraph.</p> <p>This page will break after this paragraph.</p> <button onclick="window.print()">Print</button> <button onclick="myFunction()">Print with page-break-after: always at p tag.</button> <script> function myFunction(){ var styles = 'p{page-break-after:always;}'; var styleSheet = document.createElement("style") styleSheet.type = "text/css" styleSheet.media = "print" styleSheet.innerText = styles document.head.appendChild(styleSheet); window.print(); } window.onafterprint = function(){ location.reload(); } </script> </body> </html>

Run