CSS break-before egenskap

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 interrupt the page, column, or region before the element with the break-after attribute, or avoid splitting the element and spanning two pages.

Exempel

Always insert a page break before the <h1> element:

@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;

Egenskapsvärde

Värde Beskrivning
auto Standard. Automatiskt utför sidbrytning, kolonnbrytning och regionbrytning innan elementet.
all Lägg alltid till en sidbrytning omedelbart innan huvudramen.
always Lägg alltid till en sidbrytning (page-break) innan elementet.
avoid Undvik att lägga till brytningar för sidor, kolonner eller regioner innan elementet.
avoid-column Undvik att lägga till en kolonnbrytning innan elementet.
avoid-page Undvik att lägga till en sidbrytning innan elementet.
avoid-region Undvik att lägga till en regionbrytning innan elementet.
kolonn Lägg alltid till en kolonnbrytning innan elementet.
vänster Lägg till en eller två sidbrytningar innan elementet för att forma nästa sida som vänster sida.
sida Lägg alltid till en sidbrytning innan elementet.
recto Lägg till en eller två sidbrytningar innan huvudramen för att forma nästa sida som recto-sida.
region Lägg alltid till en regionbrytning innan elementet.
höger Lägg till en eller två sidbrytningar innan elementet för att forma nästa sida som höger sida.
verso Lägg till en eller två sidbrytningar innan huvudramen för att forma nästa sida som verso-sida.
initial Sätt denna egenskap till dess standardvärde. Se till: initial.
inherit Inheriterar denna egenskap från föräldrelementet. Se till: inherit.

Tekniska detaljer

Standardvärde: auto
Arv: Nej
Animation production: Stöds inte. Se till:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.breakBefore="always"

Mer exempel

Exempel

För att säkerställa att alla nya kapitel börjar på rätt sida vid utskrift kan du använda break-before: för alla <h1>-element:

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

Exempel

Lägg alltid till en region-break: innan <ul> i regionen:

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

Webbläsarstöd

Talen i tabellen anger den första webbläsareversion som helt stöder denna egenskap.

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