Syntaxe et valeurs possibles de la propriété page-break-after

La propriété CSS `page-break-after` permet de contrôler le comportement des sauts de page lors de l'impression ou de la génération de PDF d'un document HTML. Cette propriété permet de définir si un élément doit forcer un saut de page après lui, et si oui, comment le saut de page doit être traité.

Voici un tutoriel sur la propriété CSS `page-break-after`:

Définition

La propriété CSS `page-break-after` est utilisée pour contrôler le comportement des sauts de page lors de l'impression ou de la génération de PDF d'un document HTML. Cette propriété permet de définir si un élément doit forcer un saut de page après lui, et si oui, comment le saut de page doit être traité.

Syntaxe générale de la propriété CSS `page-break-after

La syntaxe générale de la propriété `page-break-after` est la suivante :

page-break-after: valeur;

Valeurs possibles de la propriété CSS `page-break-after

Les valeurs possibles pour la propriété `page-break-after` sont les suivantes :

• auto`: cette valeur indique que le comportement de saut de page est laissé au navigateur ou à l'application de génération de PDF.
• always`: cette valeur indique que le saut de page doit toujours être effectué après l'élément.
• avoid`: cette valeur indique que le saut de page ne doit pas être effectué après l'élément si cela peut être évité.
• left`: cette valeur indique que le saut de page doit être effectué après l'élément, avec la page suivante débutant sur la page de gauche.
• right`: cette valeur indique que le saut de page doit être effectué après l'élément, avec la page suivante débutant sur la page de droite.
• initial`: cette valeur indique que la propriété doit prendre sa valeur par défaut.
• inherit`: cette valeur indique que la propriété doit hériter de la valeur de son parent.

Exemples pratiques de la propriété CSS `page-break-after

Voici quelques exemples pratiques de la propriété `page-break-after` :

1. Force un saut de page après un élément :

<div style="page-break-after: always;"></div>

2. Évite un saut de page après un élément si possible :

<div style="page-break-after: avoid;"></div>

3. Force un saut de page après un élément avec la page suivante débutant sur la page de gauche :

<div style="page-break-after: left;"></div>

4. Force un saut de page après un élément avec la page suivante débutant sur la page de droite :

<div style="page-break-after: right;"></div>

Conseils et astuces d'utilisation de la propriété CSS `page-break-after

• Utilisez la propriété `page-break-after` avec parcimonie, car elle peut avoir un impact sur la mise en page du document.
• Évitez de placer trop d'éléments avec une propriété `page-break-after` définie sur `always`, car cela peut entraîner des pages vides ou une mise en page incohérente.
• Lorsque vous utilisez la propriété `page-break-after`, assurez-vous que la mise en page du document est cohérente et que les éléments ne sont pas coupés en deux entre deux pages.
• Testez la mise en page de votre document dans différents navigateurs et applications de génération de PDF pour vous assurer que le comportement de la propriété `page-break-after` est cohérent.
• Évitez d'utiliser la propriété `page-break-after` avec des éléments qui ont une hauteur dynamique, car cela peut entraîner des sauts de page inattendus.
• Évitez de placer des éléments avec une propriété `page-break-after` définie sur `always` à l'intérieur d'un élément avec une propriété `display: flex`, car cela peut entraîner des problèmes de mise en page.
• Utilisez les propriétés `page-break-inside` et `page-break-before` pour contrôler les sauts de page à l'intérieur et avant un élément, respectivement.
• Évitez d'utiliser la propriété `page-break-after` pour contrôler la mise en page de l'en-tête et du pied de page, car il existe des propriétés spécifiques pour contrôler leur comportement (`page-break-before: always` pour l'en-tête et `page-break-after: always` pour le pied de page).
• Utilisez la propriété `orphans` et `widows` pour contrôler le nombre minimum de lignes de texte qui doivent apparaître sur la page suivante ou la page précédente, respectivement.

En conclusion, la propriété CSS `page-break-after` est un outil utile pour contrôler les sauts de page lors de l'impression ou de la génération de PDF d'un document HTML. Cependant, il doit être utilisé avec parcimonie et avec une attention particulière à la mise en page cohérente du document.

Cet extrait de code fait 3 choses :

il force un saut de page avant tous les titres h2 (peut-être que les balises h2 dans votre document sont des titres de chapitre qui méritent une nouvelle page)
il empêche les sauts de page juste après les sous-titres parce que cela semble bizarre
il empêche les sauts de page à l'intérieur des balises pre et des guillemets au niveau du bloc

Prise en charge de la propriété dans les navigateurs

Explorateur
Verssion	1	4	1	1.2	7

Autre exemple

Exemple :      Copier le code

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}