CSS διάσπαση-πριν ιδιότητα

Ορισμός και χρήση

Η ιδιότητα break-before καθορίζει αν πρέπει να συμβεί το διαχωρισμό σελίδας (page-break), διαχωρισμό στήλης (column-break) ή διαχωρισμό περιοχής (region-break) πριν από το καθορισμένο στοιχείο.

Η ιδιότητα break-before επεκτείνει την ιδιότητα page-break-before του CSS2.

Με τη χρήση του break-before, μπορείτε να ενημερώσετε τον περιηγητή να διακόψει τη σελίδα, τη στήλη ή την περιοχή πριν από το στοιχείο στο οποίο εφαρμόζεται το break-after, ή να αποφύγετε τη διαίρεση του στοιχείου και να το διέχουν δύο σελίδες.

Examples

Πάντα εισάγετε τον διαχωριστή σελίδας πριν από το στοιχείο <h1>:

@media print {
  h1 {
    break-before: always;
  }
}

CSS Γλώσσα

break-before: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Property value

Value Description
auto Default. Automatically paginate, columnize, or regionize before the element.
all Always insert a page break immediately before the main frame.
always Always insert a page break (page-break) before the element.
avoid Avoid page, column, or region breaks before the element.
avoid-column Avoid inserting a column before the element.
avoid-page Avoid inserting a page before the element.
avoid-region Avoid inserting a region before the element.
column Always insert a column separator before the element.
left Insert one or two page breaks before the element to format the next page as a left page.
page Always insert a page break before the element.
recto Insert one or two page breaks before the main frame to format the next page as a recto page.
region Always insert a region separator before the element.
right Insert one or two page breaks before the element to format the next page as a right page.
verso Insert one or two page breaks before the main frame to format the next page as a verso page.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: auto
Inheritance: No
Animation production: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.breakBefore="always"

More examples

Examples

To ensure that all new chapters start on the correct page (such as in a book), you can use break-before: on all <h1> elements:

@media print {
  h1 {
    break-before: right;
  }
}

Examples

Always insert a region-break: before the <ul> within the region:

.region ul {
    break-before: region;
  }
}

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0