Comment empêcher les DIV dynamiques d'être répartis sur plusieurs pages lors de l'impression WebKit ?

Surmonter les perturbations DIV en milieu de page lors de l'impression avec WebKit

Lors de l'impression de documents volumineux avec de nombreux DIV à hauteur dynamique, il est courant de rencontrer le problème des DIV divisés involontairement entre les pages. Cela peut rendre les impressions très peu pratiques et difficiles à utiliser. Bien que les propriétés de saut de page CSS telles que page-break-before, page-break-after et page-break-inside visent à contrôler les sauts de page, elles peuvent s'avérer inefficaces dans certaines situations.

La solution : Utilisation de Break-Inside

La propriété CSS break-inside offre une solution fiable à ce problème. En appliquant cette propriété aux DIV de votre document, vous pouvez demander au navigateur d'éviter de les diviser sur plusieurs pages.

Voici un exemple d'utilisation du break-inside :

<code class="css">@media print {
  div {
    break-inside: avoid;
  }
}</code>

Ceci Le code CSS spécifie que le style d'impression de tous les DIV doit inclure la règle break-inside:eviter. Cela indique au navigateur de faire tout son possible pour garder les DIV sur la même page lors de l'impression.

Compatibilité des navigateurs

Heureusement, le cambriolage est largement pris en charge par les principaux navigateurs, dont :

• Chrome 50
• Edge 12
• Firefox 65
• Opera 37
• Safari 10

Comme alternative, vous pouvez utiliser page-break-inside: évitez à la place, qui est obsolète. Cependant, effraction : éviter est l'option recommandée et la plus largement compatible.

En mettant en œuvre cette solution, vous pouvez efficacement empêcher vos DIV d'être coupés au milieu de la page lors de l'impression, garantissant ainsi une sortie imprimée cohérente et utilisable. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!