La propriété break-after décrit la façon dont la page, la colonne ou la région se fragmente après la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

/* Valeurs génériques */
break-after: auto;
break-after: avoid;

/* Valeurs de rupture liées aux pages */
break-after: avoid-page;
break-after: page;
break-after: always;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;

/* Valeurs de rupture liées aux colonnes */
break-after: avoid-column;
break-after: column;

/* Valeurs de rupture liées aux régions */
break-after: avoid-region;
break-after: region;

/* Valeurs globales */
break-after: inherit;
break-after: initial;
break-after: unset;

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de break-after de l'élément précédent, la valeur de break-before de l'élément suivant et la valeur de break-inside de l'élément englobant.

Pour déterminer si on a une rupture, on applique les règles suivantes :

  1. Si l'une des trois valeurs correspond à une rupture forcée (always, left, right, page, column ou region), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, break-before l'emporte sur break-after qui l'emporte sur break-inside).
  2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (avoid, avoid-page, avoid-region, avoid-column), aucune rupture ne sera appliquée à cet endroit.

Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.

Syntaxe

Valeurs

auto
Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) après la boîte.
always
Force la rupture après la boîte. Cette valeur est synonyme de page et a été conservée pour faciliter la transition depuis la propriété page-break-after (qui forme un sous-ensemble de cette propriété).
avoid
Empêche toute rupture (de page, de colonne ou de région) après la boîte.
left
Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page gauche.
right
Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page droite.
page
Force un saut de page après la boîte de l'élément.
column
Force une rupture de colonne de page après la boîte de l'élément.
region
Force une rupture de région après la boîte de l'élément.
recto
Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).
verso
Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).
avoid-page
Empêche toute saut de page après la boîte de l'élément.
avoid-column
Empêche toute rupture de colonne après la boîte de l'élément.
avoid-region
Empêche toute rupture de région après boîte de l'élément.

Syntaxe formelle

auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region

Exemples

CSS

.exemple {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

p {
  break-after: avoid-column;
  /* Pour Firefox : */
  page-break-after: avoid;
  /* Pour WebKit : */
  -webkit-column-break-after: avoid;
}

HTML

<div class="exemple">
  <p>« Mais alors, » pensa Alice, « ne serai-je donc
  jamais plus vieille que je ne le suis maintenant ?
  D’un côté cela aura ses avantages, ne jamais être
  une vieille femme. Mais alors avoir toujours des
  leçons à apprendre ! Oh, je n’aimerais pas cela du
  tout. »</p>
  <p>« Oh ! Alice, petite folle, » se répondit-elle.
  « Comment pourriez-vous apprendre des leçons ici ?
  Il y a à peine de la place pour vous, et il n’y en
  a pas du tout pour vos livres de leçons. »</p>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Fragmentation Module Level 3
La définition de 'break-after' dans cette spécification.
Candidat au statut de recommandation Ajouts des mots-clés recto et verso. Le type de média pour cette propriété est passé de paged à visual. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.
CSS Regions Module Level 1
La définition de 'break-after' dans cette spécification.
Version de travail La spécification étend la propriété pour gérer les sauts de région. Les mots-clés avoid-region et region sont ajoutés.
CSS Multi-column Layout Module
La définition de 'break-after' dans cette spécification.
Version de travail Définition initiale. La spécification étend la propriété page-break-after de CSS 2.1 afin de gérer les sauts de page ou de colonne.

Valeur initialeauto
Applicabilitééléments de type bloc
Héritéenon
Médiapaged
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 50Edge Support complet 12Firefox Aucun support NonIE Support complet 10Opera Support complet 37
Support complet 37
Aucun support 11.1 — 12.1
Safari Support complet 10WebView Android Support complet 50Chrome Android Support complet 50Edge Mobile Support complet OuiFirefox Android Aucun support NonOpera Android ? Safari iOS Support complet 10Samsung Internet Android Support complet 5.0
column and avoid-columnChrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Support complet 10Opera Aucun support 11.1 — 12.1Safari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android ? Safari iOS Aucun support NonSamsung Internet Android Aucun support Non
recto and verso
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
region and avoid-region
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android ? Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, edspeedy
Dernière mise à jour par : SphinxKnight,