Web/CSS/page-break-after

From Get docs


This property has been replaced by the break-after property.

The page-break-after CSS property adjusts page breaks after the current element.

/* Keyword values */
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

/* Global values */
page-break-after: inherit;
page-break-after: initial;
page-break-after: unset;

This property applies to block elements that generate a box. It won't apply on an empty <div> that won't generate a box.

Syntax

Values

auto
Initial value. Automatic page breaks (neither forced nor forbidden).
always
Always force page breaks after the element.
avoid
Avoid page breaks after the element.
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.
recto '
If pages progress left-to-right, then this acts like right. If pages progress right-to-left, then this acts like left.
verso '
If pages progress left-to-right, then this acts like left. If pages progress right-to-left, then this acts like right.

Page break aliases

The page-break-after property is now a legacy property, replaced by break-after.

For compatibility reasons, page-break-after should be treated by browsers as an alias of break-after. This ensures that sites using page-break-after continue to work as designed. A subset of values should be aliased as follows:

page-break-after break-after
auto auto
left left
right right
avoid avoid
always page

Formal definition

Initial value auto
Applies to block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

auto | always | avoid | left | right | recto | verso

Examples

Setting a page break after footnotes

/* move to a new page after footnotes */
div.footnotes { 
  page-break-after: always; 
}

Specifications

Specification Status Comment
CSS Logical Properties and Values Level 1The definition of 'recto and verso' in that specification. Editor's Draft Adds the values recto and verso.
CSS Paged Media Module Level 3The definition of 'page-break-after' in that specification. Working Draft Extends the element that this property applies to table rows and table row groups.
CSS Level 2 (Revision 1)The definition of 'page-break-after' in that specification. Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
page-break-after Chrome

Full support 1

Edge

Full support 12

Firefox Full support 1

Notes'

Full support 1

Notes'

Notes' The values avoid, left, and right are unsupported.

IE

Full support 4

Opera

Full support 7

Safari

Full support 1.2

WebView Android

Full support 37

Chrome Android

Full support 18

Firefox Android Full support 4

Notes'

Full support 4

Notes'

Notes' The values avoid, left, and right are unsupported.

Opera Android

Full support 14

Safari iOS

Full support 1

Samsung Internet Android

Full support 1.0

Legend

Full support  
Full support
See implementation notes.'
See implementation notes.


See also