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

138

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).CSS-Druck: Vermeiden Sie halbierte DIVs zwischen den Seiten?

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?

Quelle

2009-05-25 joeylange

Geben Sie ein Beispieldokument mit dem Problem, das Sie sehen, und vielleicht können wir Ihnen helfen! –

Ich beantwortete eine sehr ähnliche Frage über die Vermeidung von Schneiden divs in zwei Hälften: http://StackOverflow.com/A/14348953/1026459 –

228

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)

Quelle

2009-05-25 18:52:46

Es ** sollte ** funktionieren. Aber das tut es nicht. Siehe http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules für die Browserunterstützung. – Greg

Funktioniert in Safari 6 :) _Was ist in der Entwicklervorschau jetzt_ –

Funktioniert in Chrome V 27.0.1453.116 –

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.

Quelle

2009-05-25 18:55:04 DOK

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.

Quelle

2010-01-27 10:45:27 Bjoern

Dies sollte mit Webkit funktionieren. Allerdings müssen Sie möglicherweise ein paar zusätzliche divs für den Druck mit page-Break-after formatiert: immer; nach ~ einem halben Dutzend deiner normalen Divs. –

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.

Quelle

2010-09-01 19:48:38 NotMe

Warum ist dies downvoted es gibt immer noch einen Teil der Lösung? +1 – easwee

@easwee: danke. Der Downvote ist zur selben Zeit passiert, als inquisitive_web_developer ein Kopfgeld auf die Frage gesetzt hat. Meine Vermutung ist, dass er es nicht mochte. ;) – NotMe

Schön! Du bist ein Champion; Ich habe nach einer Möglichkeit gesucht, dies in _wkhtmltopdf_ zu tun, das 'page-break-inside: avoid;' nicht korrekt unterstützt. Endlich habe ich einen guten Workaround. – Dave

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.

Quelle

2011-06-01 21:15:33

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.

Quelle

2015-03-20 15:57:41

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.

Quelle

2015-04-21 13:08:01 Bonjowi

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.

Quelle

2015-05-19 16:50:48

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

Antwort

Verwandte Themen