CSS-Druck: Vermeiden Sie halbierte DIVs zwischen den Seiten?

Question

Ich schreibe ein Plug-in für eine Software, die eine große Sammlung von Elementen aufnimmt und sie in einem WebView in Cocoa in HTML einfügt (das WebKit als Renderer verwendet, also kann man im Grunde annehmen, dass diese HTML-Datei ist) in Safari geöffnet).

Die DIVs, die es erzeugt, sind von dynamischer Höhe, aber sie variieren nicht zu sehr. Sie sind normalerweise ungefähr 200px. Mit ungefähr sechshundert dieser Artikel pro Dokument habe ich eine wirklich harte Zeit, es zu drucken. Wenn ich nicht Glück habe, gibt es einen Eintrag, der am unteren und oberen Rand jeder Seite halbiert ist, und das macht die Verwendung von Ausdrucken sehr schwierig.

Ich habe versucht, page-break-vor, page-break-nach, page-break-inside und Kombinationen der drei ohne Erfolg. Ich denke, es könnte WebKit sein, die Anweisungen nicht richtig zu rendern, oder vielleicht ist es mein Unverständnis, wie man sie benutzt. Auf jeden Fall brauche ich Hilfe. Wie kann ich verhindern, dass meine DIVs beim Drucken halbiert werden?

Answer 1

Dies sollte funktionieren:

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

Bitte current browser support (12-03-2014) beachten Sie:

• Chrome - 1.0+
• Firefox (Gecko) - 19.0+
• Internet Explorer - 8.0+
• Opera - 7.0+
• Safari - 1 .3+ (312)

Answer 2

Die möglichen Werte für page-break-after sind: auto, always, avoid, left, right

Ich glaube, dass Sie nicht thie page-break-after-Eigenschaft auf absolut positionierte Elemente verwenden können.

Answer 3

Ich habe das gleiche Problem bu noch keine Lösung. page-break-inside funktioniert nicht auf Browsern aber Opera. Eine Alternative könnte sein, page-break-after zu verwenden: vermeiden; auf alle untergeordneten Elemente des div zusammen zu halten ... aber in meinen Tests funktioniert das move-Attribut zB nicht. in Firefox ...

Was funktioniert in allen ppularen Browsern sind erzwungene Seitenumbrüche mit z.

Answer 4

Nur eine Teillösung: Die einzige Möglichkeit, dies für IE arbeiten zu können, war, jedes div in seine eigene Tabelle zu verpacken und den Seitenumbruch auf dem Tisch zu setzen vermeiden.

Answer 5

Seitenumbruch: vermeiden; funktioniert definitiv nicht in webkit, in der Tat ist seit 5+ Jahren ein bekanntes Problem https://bugs.webkit.org/show_bug.cgi?id=5097

Soweit meine Forschung ist gegangen, gibt es keine bekannte Methode, um dies zu erreichen (ich arbeite an herauszufinden, meine eigenen hack)

Der Rat, den ich Ihnen geben kann, ist, um diese Funktionalität in FF zu erreichen, wickeln Sie den Inhalt, den Sie nicht möchten, jemals in einem DIV (oder einem Container) mit Überlauf: Auto (nur darauf achten Sie nicht verursachen seltsame Bildlaufleisten, die angezeigt werden, indem der Container zu klein dimensioniert wird).

Leider ist FF der einzige Browser, in dem ich das geschafft habe, und Webkit ist das, worüber ich mir Sorgen mache.

Answer 6

In meinem Fall habe ich es geschafft, die Seitenumbrüche in Webkit zu beheben, indem ich meine ausgewählten divs auf page-break-inside: movate setze und auch alle anzuzeigenden Elemente einstelle: inline. So ähnlich wie dieses:

Es scheint wie page-break-Eigenschaften können nur auf Inline-Elemente (in Webkit) angewendet werden. Ich habe versucht, nur Anzeige zu verwenden: Inline zu den bestimmten Elementen, die ich brauchte, aber das hat nicht funktioniert. Die einzige Sache, die funktionierte, war, inline auf alle Elemente anzuwenden. Ich nehme an, es ist eines der großen Container-Divs, die Dinge vermasseln.

Vielleicht könnte jemand auf diese erweitern.

Answer 7

page-break-inside: avoid; gab mir Probleme mit wkhtmltopdf.

Um Brüche im Text zu vermeiden, fügen Sie display: table; dem CSS des texthaltigen div hinzu.

Ich hoffe, das funktioniert auch für Sie. Danke Johns.

Answer 8

Ein Fehler, auf den ich stieß, war ein Elternelement, bei dem das Attribut 'Überlauf' auf 'Auto' gesetzt war. Dadurch werden untergeordnete div-Elemente mit dem Attribut page-break-inside in der Druckversion negiert. Ansonsten funktioniert page-break-inside: avoid bei Chrome gut für mich.