Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété break-before

Description.

Les propriétés break-before et break-after imposent ou interdisent les sauts de page, de colonne ou de région avant ou après l'élément.

Ces deux propriétés complètent la propriété break-inside. Ainsi, dans l'exemple ci-dessous, la présence ou non d'un saut entre les éléments 1 et 2 dépend de :

  • La propriété Object de l'élément parent.
  • La propriété Object de l'élément 1.
  • La propriété Object de l'élément 2.
Élément parent
Élément 1

Élément 2

Certains types d'éléments ne sont jamais coupés : les images, les vidéos, par exemple. Par contre les blocs contenant du texte peuvent se retrouver avec une rupture au milieu.

Consultez également ces autres propriétés, qui ont elles aussi un effet sur les ruptures : break-inside, widows, orphans.

Object et Object remplacent les anciennes propriétés page-break-before et page-break-after qui ne devraient plus être utilisées.

Syntaxes pour Object et Object.

Les syntaxes ci-après sont données pour Object mais elles sont totalement transposables pour Object. Il suffit de remplacer dans les explications, les mots "avant" par "après".

  • break-before: auto;

    Valeur par défaut. Les ruptures sont déterminées par le navigateur. Aucune contrainte particulière n'est spécifiée.

  • break-before: avoid;

    Évite, dans le mesure du possible, les sauts de colonne, de page et de région, avant l'élément.

  • break-before: avoid-page;

    Évite les sauts de page avant l'élément.

  • break-before: page;

    Force un saut de page avant l'élément.

  • break-before: left;

    Force un ou deux sauts de page avant l'élément, de manière à ce que la page suivante soit une page de gauche (numéro pair).

  • break-before: right;

    Force un ou deux sauts de page avant l'élément, de manière à ce que la page suivante soit une page de droite (numérotation impaire).

  • break-before: recto;

    Force un ou deux sauts de pages, de manière à ce que la page suivante soit une page recto. Pour les écritures européennes, de gauche à droite, cette valeur est identique à right. Pour les écritures de droite à gauche, elle est équivalente à left.

  • break-before: verso;

    Force un ou deux sauts de pages, de manière à ce que la page suivante soit une page verso. Pour les écritures européennes, de gauche à droite, cette valeur est identique à left. Pour les écritures de droite à gauche, elle est équivalente à right.

  • break-before: avoid-column;

    Évite, dans la mesure du possible, les sauts de colonne avant l'élément.

  • break-before: column;

    Force un saut de colonne avant l'élément.

  • break-before: avoid-region;

    Évite, dans la mesure du possible, les sauts de région avant l'élément.

  • break-before: region;

    Force un saut de région avant l'élément.

  • break-before: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Simulateur pour les sauts de colonnes.

La valeur choisie est appliquée sur la propriété Object de chacun des paragraphes à l'intérieur du cadre de démonstration. Vous pouvez redimensionner ce dernier pour observer comment se comportent les sauts de colonnes.

Remarque : la propriété Object a été fixée à la valeur auto pour ne pas interférer avec le comportement de Object.

break-before :
Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.
Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.
Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.

Simulateur pour les sauts de page.

La valeur choisie est appliquée aux titres h2 de cette page. Pour voir l'effet, vous devrez imprimer la page ou l'afficher en aperçu avant impression.

break-before :

Prise en charge par les navigateurs (compatibilité).

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Colonnes multiples - Propriétés.

  • break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
  • break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
  • column-count : Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
  • column-fill : Gère la répartition du contenu entre les colonnes.
  • column-gap : Définit l'espacement entre les colonnes.
  • column-rule : Définit tous les paramètres du trait de séparation entre les colonnes.
  • column-rule-color : Définit la couleur des lignes de séparation de colonnes.
  • column-rule-style : Choisit le type de trait pour la séparation des colonnes.
  • column-rule-width : Définit l'épaisseur du trait de séparation entre les colonnes.
  • column-span : Gère le chevauchement du contenu sur plusieurs colonnes.
  • column-width : Définit la largeur des colonnes.
  • columns : Définit les caractéristiques d'une mise en page sur plusieurs colonnes.
  • orphans : Gestion des coupures en bas de page.
  • widows : Gestion des ruptures en haut de page.

Impression - Propriétés.

  • bleed :
  • break-after : Interdit ou impose des sauts (page, colonne...) après l'élément.
  • break-inside : Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
  • color-adjust : Autorise ou non le navigateur à optimiser les couleurs
  • orphans : Gestion des coupures en bas de page.
  • size : Dimensions et orientation des pages imprimées.
  • widows : Gestion des ruptures en haut de page.

Impression - Directives.

  • @page : Caractéristiques de la page, à l'impression.