CSS page-break-before Property

February 10, 2021 12:37 pm IST

You are Here:

CSS page-break-before Property

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

Example

HTML Online Editor

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

Run

Syntax

Using CSS

element{ page-break-before: always; }

Using Javascript

object.style.pageBreakBefore="always";

Animatable

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

Default Value

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

Property Value

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

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

Using JavaScript

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

Example

HTML Online Editor

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

Run