break-before

La propriété break-before décrit la façon dont la page, la colonne ou la région se fragmente avant 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.

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

break-before: auto;
break-before: always;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;
break-before: page;
break-before: column;
break-before: region;
break-before: avoid;
break-before: avoid-page;
break-before: avoid-column;
break-before: avoid-region;

Valeurs

auto

Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.

always

Force la rupture avant la boîte. Cette valeur est synonyme de page et a été conservée pour faciliter la transition depuis la propriété page-break-before (qui forme un sous-ensemble de cette propriété).

avoid

Empêche toute rupture (de page, de colonne ou de région) avant la boîte.

left

Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.

right

Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.

page

Force un saut de page avant la boîte de l'élément.

column

Force une rupture de colonne de page avant la boîte de l'élément.

region

Force une rupture de région avant la boîte de l'élément.

recto

Force un ou deux sauts de page avant 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 avant 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 avant la boîte de l'élément.

avoid-column

Empêche toute rupture de colonne avant la boîte de l'élément.

avoid-region

Empêche toute rupture de région avant la 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-before: avoid-column;
  /* Pour Firefox : */
  page-break-before: avoid;
  /* Pour WebKit : */
  -webkit-column-break-before: 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

Compatibilité des navigateurs

[*] Les navigateurs WebKit et Blink ne prennent pas en charge cette propriété mais possèdent les versions non-standards -webkit-column-break-before et -webkit-region-break-before qui prennent des valeurs semblables à page-break-before.