page-break-before
Quick Summary for page-break-before
Warning: This property has been replaced by the break-before property.
Code Usage for page-break-before
/* Keyword values */ page-break-before: auto; page-break-before: always; page-break-before: avoid; page-break-before: left; page-break-before: right; page-break-before: recto; page-break-before: verso;  /* Global values */ page-break-before: inherit; page-break-before: initial; page-break-before: revert; page-break-before: unset; 
More Details for page-break-before

page-break-before

Warning: This property has been replaced by the break-before property.

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

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

/* Keyword values */ page-break-before: auto; page-break-before: always; page-break-before: avoid; page-break-before: left; page-break-before: right; page-break-before: recto; page-break-before: verso;  /* Global values */ page-break-before: inherit; page-break-before: initial; page-break-before: revert; page-break-before: unset; 

Syntax

Values

auto

Initial value. Automatic page breaks (neither forced nor forbidden).

always

Always force page breaks before the element.

avoid

Avoid page breaks before the element.

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.

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-before property is now a legacy property, replaced by break-before.

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

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

Formal definition

Initial valueauto
Applies toblock-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

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

Examples

Avoid a page break before an element

/* avoid page break before div elements of class note */ div.note {     page-break-before: avoid; } 

Specifications

Specification
CSS Logical Properties and Values Level 1 # page
Proposals for the future of CSS Paged Media # page-break-before

See also

break-before, break-after, break-inside page-break-after, page-break-inside orphans, widows

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語Português (do Brasil) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
When i was a little kid, I was really scared of the dark. But then I came to understand, dark just means the absence of photons in the visible wavelength -- 400 to 700 nanometers. Then i thought, well, its really silly to be afraid of a lack of photons. Then i wasn't afraid of the dark anymore after that.
Elon Musk
Random CSS Property

appearance (-moz-appearance, -webkit-appearance)

The appearance CSS property is used to display an element using platform-native styling, based on the operating system's theme. The -moz-appearance and -webkit-appearance properties are non-standard versions of this property, used (respectively) by Gecko (Firefox) and by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing. Note that Firefox and Edge also support -webkit-appearance, for compatibility reasons.
appearance css reference