CSS page-break-before Property

The page-break-before property in CSS is used to add a page-break-before the specified element. This property helps to define how a document should behave when it is printed. Similarly page-break-before, page-break-after, and page-break-inside all three properties are instrumental in determining and hence defining how the resultant document would be when printed. 

Note: The page-break-before property cannot be used on absolutely positioned elements or an empty element. Use break-before property instead of page-break-before.

Syntax:

page-break-before: auto|always|avoid|left|right|initial|inherit;

Values:

• auto: Refers to automatic page break.

page-break-before: auto;

• always: Page break is inserted after specified element box always.

page-break-before:always;

• avoid: Page break is avoided whenever possible.

page-break-before:avoid;

• left: Page break is inserted such that next page is depicted as the left page.

page-break-before:left;

• right: Page break is inserted such that next page is depicted as the right page.

page-break-before:right;

• initial: Property is set to default

page-break-before:initial

• inherit: Property is inherited from parent element

page-break-before:inherit;

Note: The outcome of page-break-before property can be best viewed by opting for print preview of the webpage of the given HTML code. Create a similar code on your text editor like notepad++ and opt for print preview of the webpage created. Do try it for a better understanding. 

Supported Browsers: The browsers supported by CSS page-break-before Property are listed below:

• Google Chrome 1+
• Edge 12+
• Firefox 1+
• Opera 7+
• Safari 1.2+