Ich versuche, page-break-inside: avoid in einem Formular zu verwenden, das ein mehrzeiliges Flexbox-Layout verwendet (mit flex-wrap: wrap ). Das Ziel ist einfach zu vermeiden, Formularfragen beim Drucken zu brechen.
Das funktioniert gut mit einer Single-Line-Flexbox oder ohne Flexbox. Sehen Sie sich die Druckvorschau von Ссылка an (beachten Sie, dass die Flexbox-Klasse nicht angewendet wird)
Wenn Sie jedoch eine Flexbox mit mehreren Zeilen verwenden, scheint die Regel page-break-inside: avoid css zu ignorieren. Sehen Sie die Druckvorschau von Ссылка (beachten Sie, dass ich die flexbox-Klasse zum Abschnittselement hinzugefügt habe)
Ich habe sowohl im aktuellen Chrome als auch im IE11 versucht, und beide zeigen das gleiche Verhalten, was mich denken lässt, dass es kein Browser-Bug ist. (FF unterstützt Multiline-Flexboxen noch nicht, daher wird es dort bis Anfang nächsten Jahres nicht funktionieren)
Weiß jemand, wie man flex-wrap: wrap flexbox-Layouts gut mit page-break-inside:avoid spielen kann?
PS. Ich bin mir bewusst, dass es im Beispielcode keinen Sinn macht, eine mehrzeilige Flexbox zu verwenden, aber in Wirklichkeit macht es Sinn, ein Rasterlayout zu erstellen.
Ich habe ein wenig mit Ihrem Problem herumgespielt. Wenn Sie sich primär nur mit Druckproblemen befassen, dann sollte dies helfen:
Die Flexbox-Klasse wird weiterhin angewendet, aber beim Drucken wird ihre Anzeigeeigenschaft überschrieben mit:
%Vor%Dies hat dazu geführt, dass die Richtlinien für Seitenumbrüche eingehalten wurden. Überprüfen Sie die Druckvorschau Ссылка
Ich hatte das gleiche Problem und die einzige Möglichkeit, es zu überwinden, war die Verwendung von flexbox ohne flexbox. Ich habe das mit den folgenden Regeln gemacht:
%Vor%Weitere Informationen finden Sie hier: Ссылка
Tags und Links google-chrome flexbox internet-explorer-11 page-break-inside