HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Always insert a page-break before a <h1> element:
The break-before property specifies whether
or not a page break, column break, or region break should occur before the
specified
element.
The break-before property extends the CSS2
page-break-before property.
Using break-before, you can tell the browser
to break the page, column, or region before the element the break-before
property is applied to, or avoid the element to be split and span across two
pages.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.breakBefore="always" |
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| break-before | 50.0 | 10.0 | 65.0 | 10.0 | 37.0 |
| Value | Description |
|---|---|
| auto | Default. Automatic page/column/region break before the element |
| all | Always insert a page-break right before the principal box |
| always | Always insert a page-break before the element |
| avoid | Avoid a page/column/region break before the element |
| avoid-column | Avoid a column-break before the element |
| avoid-page | Avoid a page-break before the element |
| avoid-region | Avoid a region-break before the element |
| column | Always insert a column-break before the element |
| left | Insert one or two page-breaks before the element so that the next page is formatted as a left page |
| page | Always insert a page-break before the element |
| recto | Insert one or two page-breaks before the principal box so that the next page is formatted as a recto page |
| region | Always insert a region-break before the element |
| right | Insert one or two page-breaks before the element so that the next page is formatted as a right page |
| verso | Insert one or two page-breaks before the principal box so that the next page is formatted as a verso page |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
To assure that all new chapters should start on a right page (like in a book) when printed, you can use break-before: right for all <h1> elements:
@media print
{
h1 {
break-before: right;
}
}
Always insert a region-break before <ul> elements in a region:
.region ul {
break-before: region;
}
}