break-after
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2019.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété CSS break-after définit 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;
break-after: always;
break-after: all;
/* 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 :
- Si l'une des trois valeurs correspond à une rupture forcée (
always,left,right,page,columnouregion), 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-beforel'emporte surbreak-afterqui l'emporte surbreak-inside). - 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.
alwaysExpérimental-
Force la rupture après la boîte principale. Le type de rupture dépend du contexte de fragmentation. Si on est dans un conteneur multi-colonne, il y aura une rupture de colonne et si on est à l'intérieur d'un média paginé, il y aura une rupture de page.
allExpérimental-
Force la rupture de page après la boîte principale. La rupture a lieu quel que soit le contexte de fragmentation. Ainsi, si on a un élément dans un conteneur multi-colonne lui-même situé dans un média paginé, il y aura une rupture de colonne et une rupture de page.
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.
regionExpérimental-
Force une rupture de région après la boîte de l'élément.
rectoExpérimental-
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).
versoExpérimental-
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-regionExpérimental-
Empêche toute rupture de région après boîte de l'élément.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | éléments de type bloc |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
break-after =
auto |
avoid |
always |
all |
avoid-page |
page |
left |
right |
recto |
verso |
avoid-column |
column |
avoid-region |
region
Synonymes pour page-break-after
Pour des raisons de compatibilité, la propriété historique page-break-after devrait être traitée par les navigateurs comme un alias de break-after. Cela permet de s'assurer que les sites qui utilisaient page-break-after continuent de fonctionner. Voici un sous-ensemble des valeurs avec leurs alias :
page-break-after |
break-after |
|---|---|
auto |
auto |
left |
left |
right |
right |
avoid |
avoid |
always |
page |
Note :
La valeur always de page-break-* a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est page et pas always.
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
| Specification |
|---|
| CSS Fragmentation Module Level 3 # break-between |
| CSS Regions Module Level 1 # region-flow-break |
| CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside |
Compatibilité des navigateurs
Chargement…