CSS-Druck: Vermeiden Sie halbierte DIVs zwischen Seiten?

199

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?

Joeylange
quelle
Stellen Sie ein Beispieldokument mit dem Problem bereit, das Sie sehen, und vielleicht können wir Ihnen helfen!
X-Istence
Ich beantwortete hier eine sehr ähnliche Frage zum Vermeiden des Halbierens von
Travis J
1
Hinweis: Diese Eigenschaft kann NICHT für absolut positionierte (und anscheinend auch für Inline-Block) Elemente verwendet werden.
Ujjwal Singh

Antworten:

335

Das sollte funktionieren:

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

Bitte beachten Sie die aktuelle Browserunterstützung (12-03-2014) :

  • Chrome - 1.0+
  • Firefox (Gecko) - 19.0+
  • Internet Explorer - 8.0+
  • Opera - 7.0+
  • Safari - 1,3+ (312)
Dmitri Farkov
quelle
7
Es sollte funktionieren. Aber das tut es nicht. Informationen zur Browserunterstützung finden Sie unter en.wikipedia.org/wiki/… .
Greg
1
Funktioniert in Safari 6 :), das jetzt in der Entwicklervorschau ist
Linus Unnebäck
1
Funktioniert in Chrome V 27.0.1453.116
T. Brian Jones
4
Funktioniert auch in Netscape. Vielen Dank!
2
Warum brauchen Sie Mediendruck? Ist es dasselbe, wenn der Mediendruck nicht verwendet wird und die Regel direkt auf div angewendet wird?
FrenkyB
21

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.

Nicht ich
quelle
@easwee: danke. Die Abwertung fand zur gleichen Zeit statt, als inquisitive_web_developer der Frage ein Kopfgeld gab. Ich vermute, dass es ihm nicht gefallen hat. ;)
NotMe
3
Wunderschönen! Du bist ein Champion; Ich habe nach einer Möglichkeit gesucht , dies in wkhtmltopdf zu tun , die nicht page-break-inside: avoid;richtig unterstützt wird. Endlich habe ich eine anständige Problemumgehung.
Dave
2
Getesteter Seitenumbruch in wkhtmltopdf in Version 0.11 und es funktioniert.
cmc
Getestet mit wkhtmltopdf 0.12.2.1. Div-Inside-Tabellen werden nicht mehr benötigt, setzen Sie einfach den Seitenumbruch ein: Vermeiden Sie die Div-Auswahl. Funktioniert!
Paul Marti
12

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.

Bonjowi
quelle
Ich hatte die ungeklärten Räume, die hier und da bei der Verwendung 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!
Jay Dadhania
6

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.

Bob Monteverde
quelle
5

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.

DOK
quelle
1
Anscheinend funktioniert es auch nicht auf inline-blocks
Ujjwal Singh
5

Ich 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

Björn
quelle
Dies sollte mit Webkit funktionieren. Möglicherweise müssen Sie jedoch einige zusätzliche Divs einfügen, die für den Druck mit Seitenumbruch nach gestaltet sind: immer; nach ~ einem halben Dutzend deiner regulären Divs.
16.
3

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: avoidfunktioniert Chrome für mich einwandfrei.

Eric D.
quelle
2

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:

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

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.

Waltur Buerk
quelle
1
@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

Für alle neuen Browser funktioniert diese Lösung. Siehe caniuse.com/#search=page-break-inside

Naun Lemos
quelle
1

page-break-inside: avoid;scheint nicht immer zu funktionieren. Es scheint die Höhe und Position der Containerelemente zu berücksichtigen.

Beispielsweise werden inline-blockElemente, die größer als die Seite sind, abgeschnitten.

Ich konnte die Arbeitsfunktionalität wiederherstellen, page-break-inside: avoid;indem ich ein Containerelement identifizierte display: inline-blockund hinzufügte:

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

Hoffe, das hilft Leuten, die sich beschweren, dass "Seitenumbruch nicht funktioniert".

Eric Wendelin
quelle