oujood.com

Comment éviter les coupures indésirables de page avec la propriété CSS page-break-inside

Découvrez comment la propriété CSS page-break-inside peut vous aider à éviter les coupures indésirables de page lors de l'impression de vos documents.

chercher |

Tutoriel CSS : La propriété page-break-inside

La propriété CSS page-break-inside permet de définir comment un élément doit être traité lorsqu'il est coupé par une page imprimée.

Définition

La propriété page-break-inside spécifie si un élément doit être coupé lorsqu'il est imprimé sur plusieurs pages. Elle peut être utilisée pour éviter qu'un élément important soit coupé en deux, ou pour forcer un élément à être coupé en deux pages distinctes.

Syntaxe générale

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

page-break-inside: auto;

page-break-inside: avoid;

page-break-inside: initial;

page-break-inside: inherit;

Valeurs par défautauto
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS2
Syntaxe JavaScript: object.style.pageBreakInside="avoid"

Valeurs possibles de la propriété page-break-inside

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

  • auto : valeur par défaut, permettant au navigateur de déterminer lui-même s'il doit couper l'élément ou non.
  • avoid : empêche l'élément d'être coupé par une page imprimée.
  • initial : rétablit la valeur par défaut de la propriété.
  • inherit : hérite de la valeur de la propriété de l'élément parent.

Astuces et conseils d'utilisation de la propriété page-break-inside

Voici quelques astuces et conseils pour utiliser au mieux la propriété page-break-inside :

  • Utilisez la valeur avoid pour empêcher la coupure d'un élément important tel qu'un titre, un sous-titre, une image ou une légende.
  • Évitez d'utiliser la valeur avoid sur des éléments qui pourraient être coupés en deux pages distinctes, car cela pourrait provoquer des sauts de page inutiles et rendre la lecture difficile.
  • Assurez-vous que les éléments importants de votre contenu sont placés en haut de page ou en début de paragraphe, afin d'éviter qu'ils soient coupés en deux pages distinctes.
  • La propriété page-break-inside ne fonctionne que pour les éléments qui ont une hauteur définie, tels que les blocs et les tableaux. Elle n'affecte pas les éléments en ligne tels que les éléments span.
  • Il est possible d'utiliser la propriété page-break-before ou page-break-after pour forcer un saut de page avant ou après un élément spécifique.
  • La propriété page-break-inside est principalement utilisée pour l'impression de documents, mais peut également être utile pour la présentation de contenu sur des écrans de grande taille ou en mode paysage.

Exemple d'utilisation de la propriété page-break-inside

Voici un exemple d'utilisation de la propriété page-break-inside pour éviter la coupure d'un titre :

      <style>
        .titre {
          page-break-inside: avoid;
          font-size: 24px;
          font-weight: bold;
        }
      </style>
      <div class="titre">Titre important</div>
      <p>Texte du paragraphe...</p>
    

Dans cet exemple, la propriété page-break-inside est utilisée pour empêcher la coupure du titre "Titre important" par une page imprimée. La valeur "avoid" est utilisée pour indiquer que l'élément ne doit pas être coupé. Le titre est ensuite stylisé avec une taille de police plus grande et un poids de police plus important pour le mettre en évidence.

Prise en charge de la propriété dans les navigateurs de la propriété page-break-inside

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion18191.3 7



Voir aussi nos tutoriel :

fonction strtok, strtok

Coupe une chaîne en segments

Boites de dialogue Modals en bootstrap

Créer des boîtes de dialogue très intelligentes et flexible avec le plugin modal Bootstrap.

background-attachment

Définit si une image defond est fixe ou défile avec le reste de la page