CSS-Druck: Vermeiden Sie halbierte DIVs zwischen Seiten?

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?

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)

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.

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.

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.

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.

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

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.

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.

@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

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".