Propriété break-before CSS

Définition et utilisation

L'attribut break-before détermine si une pagination (page-break), une interruption de colonne (column-break) ou une division de zone (region-break) doit se produire avant l'élément spécifié.

L'attribut break-before étend l'attribut page-break-before de CSS2.

En utilisant break-before, vous pouvez informer le navigateur d'interrompre la page, la colonne ou la zone avant l'élément auquel l'attribut break-after est appliqué, ou éviter de couper l'élément et de le diviser sur deux pages.

Exemple

Insérer toujours un symbole de page avant l'élément <h1> :

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

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
auto Par défaut. Automatiquement partitionner, partitionner en colonne, partitionner en région avant l'élément.
all Insérer toujours un saut de page immédiatement avant le cadre principal.
always Insérer toujours un saut de page avant l'élément (page-break).
avoid Éviter les interruptions de page, de colonne et de région avant l'élément.
avoid-column Éviter de partitionner avant l'élément.
avoid-page Éviter de partitionner avant l'élément.
avoid-region Éviter de partitionner avant l'élément.
column Insérer toujours un séparateur de colonne avant l'élément.
left Insérer un ou deux sauts de page avant l'élément pour formatter la page suivante en page de gauche.
page Insérer toujours un saut de page avant l'élément.
recto Insérer un ou deux sauts de page avant le cadre principal pour formatter la page suivante en recto.
region Insérer toujours un séparateur de région avant l'élément.
right Insérer un ou deux sauts de page avant l'élément pour formatter la page suivante en page de droite.
verso Insérer un ou deux sauts de page avant le cadre principal pour formatter la page suivante en verso.
initial Set this property to its default value. See : initial.
inherit Inherits this property from its parent element. See : inherit.

Détails techniques

Valeur par défaut : auto
Héritage : Non
Animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.breakBefore="always"

Plus d'exemples

Exemple

Pour assurer que tous les nouveaux chapitres commencent sur la page correcte lors de l'impression (par exemple, dans un livre), vous pouvez utiliser break-before: pour tous les éléments <h1> :

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

Exemple

Insérer toujours un region-break avant <ul> dans la region :

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

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété.

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