Heim > Web-Frontend > CSS-Tutorial > Wie kann verhindert werden, dass DIVs beim Drucken auf mehrere Seiten aufgeteilt werden?

Wie kann verhindert werden, dass DIVs beim Drucken auf mehrere Seiten aufgeteilt werden?

Susan Sarandon
Freigeben: 2024-11-04 07:02:02
Original
715 Leute haben es durchsucht

How to Prevent DIVs from Being Split Across Pages When Printing?

Druckproblem: DIV-Verzweigung über Seiten hinweg verhindern

Sie stoßen auf ein Druckdilemma, bei dem dynamische DIVs zwischen den 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;
  }
}
Nach dem Login kopieren

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 Seitenumbrüchen -innen: vermeiden; statt einbrechen: vermeiden;. Dieser Ansatz ist jedoch veraltet und sollte mit Vorsicht verwendet werden.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass DIVs beim Drucken auf mehrere Seiten aufgeteilt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage