CSS-Druck: Vermeidung von halbierten DIVs zwischen Seiten?

Schreibe ich ein plug-in für ein Stück software, das eine große Sammlung von Gegenständen und knallt Sie in HTML in einer WebView in Kakao (was nutzt WebKit als seine renderer, so dass im Grunde können Sie davon ausgehen, diese HTML-Datei wird geöffnet in Safari).

Den DIVs, die es macht, sind dynamischer Höhe, aber nicht zu stark variieren. Sie sind in der Regel rund um 200px. Sowieso, mit rund sechs hundert dieser Positionen pro Beleg, ich habe eine wirklich harte Zeit bekommen es zu drucken. Wenn ich mal Glück habe, gibt ' s einen Eintrag gehackt in der Hälfte am unteren und oberen Rand jeder Seite, und das macht eigentlich mit die Ausdrucke sehr schwierig.

Habe ich versucht, page-break-before, page-break-after, page-break-inside, und Kombinationen der drei ohne Erfolg. Ich denke, es könnte WebKit nicht richtig Rendern der Anleitung, oder vielleicht ist es mein Mangel an Verständnis, wie man Sie benutzt. Jedenfalls, ich brauche Hilfe. Wie kann ich verhindern, dass die schneiden in die Hälfte meines DIVs beim drucken?

InformationsquelleAutor der Frage joeylange | 2009-05-25

  1. 249

    Sollte dies funktionieren:

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

    Bitte beachten Sie aktuelle browser unterstützen (12-03-2014):

    • Chrom - 1.0+
    • Firefox (Gecko) - 19.0+
    • Internet Explorer 8.0+
    • Opera 7.0+
    • Safari 1.3+ (312)

    InformationsquelleAutor der Antwort Dmitri Farkov

  2. 18

    Nur eine partielle Lösung: Der einzige Weg, ich könnte diese Arbeit für IE war, um wickeln Sie jedes div in einem eigenen Tisch, und legen Sie die page-break-inside auf dem Tisch zu vermeiden.

    InformationsquelleAutor der Antwort NotMe

  3. 4

    Ich habe das gleiche problem bu keine Lösung noch. page-break-inside funktioniert nicht auf Browser sondern Opera. Eine alternative könnte die Verwendung page-break-after: avoid; auf alle Kind-Elemente des div-halten zusammen ... aber in meinen tests der avoid-Attribut nicht funktioniert zB. in Firefox ...

    Was funktioniert in allen ppular Browser gezwungen, die Seite bricht mit zB. page-break-after: always

    InformationsquelleAutor der Antwort Bjoern

  4. 3

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

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

    InformationsquelleAutor der Antwort DOK

  5. 3

    page-break-inside: avoid; funktioniert definitiv nicht in webkit, in der Tat wurde ein bekanntes Problem, für 5+ Jahre jetzt https://bugs.webkit.org/show_bug.cgi?id=5097

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

    Den Rat, den ich dir geben kann ist, um diese Funktionalität zu erreichen FF, wickeln Sie die Inhalte, die Sie don t wollen brechen, die jemals innerhalb eines DIV (oder einen container) mit overflow: auto (nur vorsichtig sein, nicht zu verursachen seltsame scroll-Balken zu zeigen, bis durch die Auslegung der Behälter zu klein).

    Traurig, FF ist der einzige browser, den ich es geschafft, dies zu erreichen, und webkit ist die, die ich bin mehr besorgt über.

    InformationsquelleAutor der Antwort Bob Monteverde

  6. 3

    page-break-inside: avoid; gab mir Mühe mit wkhtmltopdf.

    Pausen zu vermeiden, die in den text hinzufügen display: table; zu den CSS der text-mit div.

    Ich hoffe, das funktioniert für Sie zu. Dank JohnS.

    InformationsquelleAutor der Antwort Bonjowi

  7. 2

    Einer Falle, die ich begegnete, war ein parent-element mit der 'overflow' - Attribut auf "auto". Dies negiert Kind div-Elemente mit den page-break-inside-Attribut in der print-version. Ansonsten page-break-inside: avoid funktioniert gut in Chrome für mich.

    InformationsquelleAutor der Antwort Eric D.

  8. 1

    In meinem Fall konnte ich fix die Seite brechen Schwierigkeiten in webkit, durch die Einstellung meiner ausgewählten divs zu page-break-inside:avoid, und auch die Einstellung aller Elemente auf display:inline. So wie diese:

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

}

    Scheint es, wie page-break-Eigenschaften können nur angewendet werden, um inline-Elemente (webkit). Ich versuchte gelten nur display:inline auf die einzelnen Elemente, die ich brauchte, aber das hat nicht funktioniert. Das einzige, was funktionierte war die Anwendung von inline-Elementen. Ich denke, es ist eine der großen div-container', das ist messing Dinge.

    Vielleicht könnte ja mal jemand erweitern.

    InformationsquelleAutor der Antwort Waltur Buerk

Schreibe einen Kommentar