Ich schreibe ein Plug-In für eine Software, die eine große Sammlung von Elementen in HTML in einer WebView in Cocoa (die WebKit als Renderer verwendet) einfügt. Sie können also davon ausgehen, dass diese HTML-Datei geöffnet wird Safari).
Die DIVs sind dynamisch hoch, variieren aber nicht zu stark. Sie sind normalerweise um 200px. Wie auch immer, mit ungefähr sechshundert dieser Elemente pro Dokument fällt es mir wirklich schwer, es zum Drucken zu bringen. Wenn ich kein Glück habe, wird am unteren und oberen Rand jeder Seite ein Eintrag in zwei Hälften geteilt, was die Verwendung von Ausdrucken sehr schwierig macht.
Ich habe versucht, Seitenumbruch vorher, Seitenumbruch danach, Seitenumbruch innen und Kombinationen der drei ohne Erfolg. Ich denke, es könnte sein, dass WebKit die Anweisungen nicht richtig wiedergibt, oder dass ich nicht verstehe, wie man sie verwendet. Auf jeden Fall brauche ich Hilfe. Wie kann ich verhindern, dass meine DIVs beim Drucken halbiert werden?
quelle
Antworten:
Das sollte funktionieren:
Bitte beachten Sie die aktuelle Browserunterstützung (12-03-2014) :
quelle
Nur eine Teillösung: Die einzige Möglichkeit, dies für den IE zum Laufen zu bringen, bestand darin, jedes Div in eine eigene Tabelle zu packen und den Seitenumbruch in der Tabelle festzulegen, um dies zu vermeiden.
quelle
page-break-inside: avoid;
richtig unterstützt wird. Endlich habe ich eine anständige Problemumgehung.page-break-inside: avoid;
gab mir Probleme mit wkhtmltopdf.Um Unterbrechungen im Text zu vermeiden, fügen Sie
display: table;
dem CSS des texthaltigen div hinzu.Ich hoffe das funktioniert auch bei dir. Danke JohnS.
quelle
page-break-before: always;
von<div>
Elementen auftraten, fast aufgegeben . Durchsucht durch einen Ozean von SO Posts, Artikeln, offiziellen Dokumenten und so weiter. Nichts hat geholfen. Aber du, mein Freund, bist endlich mit dem gekommen, was ich genau brauchte! Ich kann dir nicht genug danken, Mann !! Ich wünschte, ich könnte dir wenigstens einen Kaffee bringen, viel Liebe aus Indien!Seitenumbruch: vermeiden; funktioniert definitiv nicht im Webkit, ist seit über 5 Jahren ein bekanntes Problem. https://bugs.webkit.org/show_bug.cgi?id=5097
Nach meinen Recherchen ist keine Methode bekannt, um dies zu erreichen (ich arbeite daran, meinen eigenen Hack herauszufinden).
Der Rat, den ich Ihnen geben kann, ist, um diese Funktionalität in FF zu erreichen, den Inhalt, den Sie niemals brechen möchten, in einen DIV (oder einen beliebigen Container) mit Überlauf zu verpacken: auto (achten Sie nur darauf, dass keine seltsamen Bildlaufleisten entstehen Zeigen Sie sich, indem Sie den Behälter zu klein dimensionieren.
Leider ist FF der einzige Browser, in dem ich dies geschafft habe, und das Webkit ist derjenige, über den ich mir mehr Sorgen mache.
quelle
Die möglichen Werte für das Umbrechen von Seiten sind:
auto, always, avoid, left, right
Ich glaube, dass Sie diese Eigenschaft zum Umbrechen von Seiten nicht für absolut positionierte Elemente verwenden können.
quelle
inline-block
sIch habe das gleiche Problem, aber noch keine Lösung. Das Einbrechen von Seiten funktioniert nicht in Browsern, sondern in Opera. Eine Alternative könnte darin bestehen, einen Seitenumbruch zu verwenden : vermeiden; auf alle untergeordneten Elemente des div, um zusammen zu bleiben ... aber in meinen Tests funktioniert das Vermeiden-Attribut nicht zB. in Firefox ...
Was in allen ppular-Browsern funktioniert, sind erzwungene Seitenumbrüche mit z. Seitenumbruch danach: immer
quelle
Eine Falle, auf die ich gestoßen bin, war ein übergeordnetes Element, dessen Attribut "Überlauf" auf "Auto" gesetzt war. Dadurch werden untergeordnete div-Elemente mit dem Attribut page-break-inside in der Druckversion negiert. Ansonsten
page-break-inside: avoid
funktioniert Chrome für mich einwandfrei.quelle
In meinem Fall habe ich es geschafft, die Probleme mit dem Seitenumbruch im Webkit zu beheben, indem ich meine ausgewählten Divs auf Seitenumbruch innerhalb: Vermeiden und auch alle anzuzeigenden Elemente: Inline gesetzt habe. Also so:
Es scheint, dass Seitenumbruch-Eigenschaften nur auf Inline-Elemente (im Webkit) angewendet werden können. Ich habe versucht, display: inline nur auf die bestimmten Elemente anzuwenden, die ich benötigte, aber das hat nicht funktioniert. Das einzige, was funktionierte, war das Inline-Anwenden auf alle Elemente. Ich denke, es ist eines der großen Container-Divs, die die Dinge durcheinander bringen.
Vielleicht könnte jemand darauf eingehen.
quelle
Für alle neuen Browser funktioniert diese Lösung. Siehe caniuse.com/#search=page-break-inside
quelle
page-break-inside: avoid;
scheint nicht immer zu funktionieren. Es scheint die Höhe und Position der Containerelemente zu berücksichtigen.Beispielsweise werden
inline-block
Elemente, die größer als die Seite sind, abgeschnitten.Ich konnte die Arbeitsfunktionalität wiederherstellen,
page-break-inside: avoid;
indem ich ein Containerelement identifiziertedisplay: inline-block
und hinzufügte:Hoffe, das hilft Leuten, die sich beschweren, dass "Seitenumbruch nicht funktioniert".
quelle