Maîtriser la propriété CSS page-break-before : définition, syntaxe et astuces

Propriété CSS : page-break-before

La propriété CSS page-break-before permet de contrôler le comportement de saut de page avant un élément.

Syntaxe générale de La Propriété css page-break-before

      /* Valeur initiale */
      page-break-before: auto;

      /* Valeurs possibles */
      page-break-before: always;
      page-break-before: avoid;
      page-break-before: left;
      page-break-before: right;
      page-break-before: initial;
      page-break-before: inherit;
    

Valeurs possibles de La Propriété css page-break-before

• auto : Valeur par défaut. Permet à l'élément de se comporter normalement, c'est-à-dire qu'il peut être coupé en deux pages si nécessaire.
• always : Force un saut de page avant l'élément.
• avoid : Empêche le saut de page avant l'élément si possible.
• left : Force un saut de page avant l'élément et le place sur la page de gauche.
• right : Force un saut de page avant l'élément et le place sur la page de droite.
• initial : Définit la propriété avec sa valeur par défaut.
• inherit : Prend la valeur de la propriété de son élément parent.

Astuces et conseils d'utilisation La Propriété css page-break-before

• La propriété page-break-before s'applique uniquement à un élément qui peut être divisé en plusieurs pages, comme un bloc de texte ou une table.
• L'utilisation de la valeur avoid peut aider à maintenir la lisibilité et l'intégrité d'un document, en évitant que certains éléments ne soient coupés en deux pages.
• Lorsqu'on travaille avec des documents à plusieurs colonnes, il peut être utile d'utiliser les valeurs left et right pour contrôler la mise en page des éléments.

Exemples pratiques La Propriété css page-break-before

Voici quelques exemples pratiques pour illustrer l'utilisation de la propriété CSS page-break-before:

1. Utilisation de "always" pour forcer un saut de page avant un élément:

  .my-element {
    page-break-before: always;
  }

2. Utilisation de "avoid" pour éviter un saut de page avant un élément si possible:

  .my-element {
    page-break-before: avoid;
  }

3. Utilisation de "left" pour forcer un saut de page avant un élément et le placer sur la page de gauche:

  .my-element {
    page-break-before: left;
  }

4. Utilisation de "right" pour forcer un saut de page avant un élément et le placer sur la page de droite:

  .my-element {
    page-break-before: right;
  }

5. Utilisation de "always" avec un élément de titre pour commencer une nouvelle section sur une nouvelle page:

  <h2 class="section-title" style="page-break-before: always;">Nouvelle section</h2>

6. Utilisation de "avoid" avec un tableau pour éviter que le tableau soit coupé en deux pages:

  table {
    page-break-inside: avoid;
    page-break-before: auto;
  }

7. Utilisation de "left" ou "right" pour contrôler la mise en page d'un élément dans un document à plusieurs colonnes:

  .my-element {
    page-break-before: right;
    column-span: all;
  }

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

Explorateur
Verssion	1	4	1	1.2	7