Druckproblem: DIV-Verzweigung über Seiten hinweg verhindern

Sind Sie auf ein Druckdilemma gestoßen, bei dem dynamische DIVs zwischen Seiten in zwei Hälften geteilt werden? Dieses Problem tritt auf, wenn Sie versuchen, lange Dokumente mit zahlreichen DIV-Elementen variabler Höhe zu drucken.

CSS-Lösung zur Rettung

Um dieses Problem zu beheben, muss die CSS-Eigenschaft unterbrochen werden. inside kommt zur Rettung. Durch die Angabe des Werts „vermeiden“ können Sie sicherstellen, dass die Rendering-Engine verhindert, dass DIVs auf halbem Weg geteilt werden. Hier ist der Codeausschnitt:

@media print {
  div {
    break-inside: avoid;
  }
}

Diese Lösung wird von allen gängigen Browsern unterstützt, einschließlich:

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

Alternative Option

Eine weitere praktikable Option ist die Verwendung von page-break-inside: Vermeidung; statt einbrechen: vermeiden;. Dieser Ansatz ist jedoch veraltet und sollte mit Vorsicht verwendet werden.