CSS break-voor eigenschap

Definitie en gebruik

De break-before eigenschap bepaalt of er een pagina (page-break), kolom (column-break) of regio (region-break) moet worden gemaakt voor het gespecificeerde element.

De break-before eigenschap breidt de page-break-before eigenschap van CSS2 uit.

Met behulp van break-before kunt u de browser informeren om een onderbreking in te voegen voor de pagina, kolom of regio voordat de break-after eigenschap van het element wordt toegepast, of om te voorkomen dat het element wordt gesplitst en over twee pagina's wordt verdeeld.

Voorbeeld

Voeg altijd een paginakeuze in voor de <h1> elementen:

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

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
auto Standaard. Voer automatisch paginering, kolomindeling en sectieindeling uit voor het element.
all Voeg altijd onmiddellijk een paginabreuk in voor de body-box.
always Voeg altijd een paginabreuk (page-break) in voor het element.
avoid Voorkom dat er een pagina-, kolom- of regionbreuk voor het element optreedt.
avoid-column Voorkom een kolombreuk voor het element.
avoid-page Voorkom een paginabreuk voor het element.
avoid-region Voorkom een sectiebreuk voor het element.
column Voeg altijd een kolombreuk in voor het element.
left Voeg een of twee paginabreuktekens in voor het element, zodat de volgende pagina geformatteerd wordt als een linkse pagina.
page Voeg altijd een paginabreuk in voor het element.
recto Voeg een of twee paginabreuktekens in voor de body-box, zodat de volgende pagina geformatteerd wordt als een recto-pagina.
region Voeg altijd een sectiebreuk in voor het element.
right Voeg een of twee paginabreuktekens in voor het element, zodat de volgende pagina geformatteerd wordt als een rechtse pagina.
verso Voeg een of twee paginabreuktekens in voor de body-box, zodat de volgende pagina geformatteerd wordt als een verso-pagina.
initial Deze eigenschap instellen op de standaardwaarde. Raadpleeg: initial.
inherit Deze eigenschap overnemen van de ouderlijke element. inherit.

Technische details

Standaardwaarde: auto
Inherits: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.breakBefore="always"

Meer voorbeelden

Voorbeeld

Om ervoor te zorgen dat alle nieuwe hoofdstukken correct beginnen op de juiste pagina (zoals in een boek), kunt u break-before: gebruiken voor alle <h1> elementen:

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

Voorbeeld

Voeg altijd een region-break: in voor de <ul> binnen de region:

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

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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