CSS seitenbruch-vor Eigenschaft

Definition and Usage

The break-before property specifies whether a page break (page-break), column break (column-break), or region break (region-break) should occur before the specified element.

The break-before property extends the page-break-before property of CSS2.

By using break-before, you can inform the browser to break the page, column, or region before the element to which the break-after property is applied, or to avoid splitting the element and spanning two pages.

Beispiel

Insert a page break before the <h1> element at all times:

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

CSS Syntax

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

Eigenschaftswert

Wert Beschreibung
auto Standard. Automatische Seitenumbruch-, Spaltenumbruch- und Regionenumbruchvorbelegung vor dem Element.
all Fügen Sie immer sofort einen Seitenumbruch vor dem Hauptrahmen ein.
always Fügen Sie immer einen Seitenumbruch (page-break) vor dem Element ein.
avoid Vermeiden Sie, dass im Element eine Unterbrechung von Seite, Spalte oder Region auftritt.
avoid-column Vermeiden Sie, einen Spaltenumbruch vor dem Element zu erstellen.
avoid-page Vermeiden Sie, einen Seitenumbruch vor dem Element zu erstellen.
avoid-region Vermeiden Sie, einen Regionenumbruch vor dem Element zu erstellen.
column Fügen Sie immer einen Spaltenumbruch vor dem Element ein.
left Fügen Sie einen oder zwei Seitenumbrüche vor dem Element ein, um das nächste Blatt als linke Seite zu formatieren.
page Fügen Sie immer einen Seitenumbruch vor dem Element ein.
recto Fügen Sie einen oder zwei Seitenumbrüche vor dem Hauptrahmen ein, um das nächste Blatt als recto zu formatieren.
region Fügen Sie immer einen Regionenumbruch vor dem Element ein.
right Fügen Sie einen oder zwei Seitenumbrüche vor dem Element ein, um das nächste Blatt als rechte Seite zu formatieren.
verso Fügen Sie einen oder zwei Seitenumbrüche vor dem Hauptrahmen ein, um das nächste Blatt als verso zu formatieren.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft von ihrem übergeordneten Element übernehmen. Siehe inherit.

Technische Details

Standardwert: auto
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS3
JavaScript-Syntax: object.style.breakBefore="always"

Mehr Beispiele

Beispiel

Um sicherzustellen, dass alle neuen Kapitel beim Drucken von der richtigen Seite (z.B. im Buch) beginnen, können Sie break-before: auf alle <h1>-Elemente anwenden:

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

Beispiel

Fügen Sie immer einen region-break: vor jedem <ul> in der region ein:

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

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

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