Durchsetzung Drucken Seitenumbrüche mit CSS

Ich habe eine Seite, die im Grunde zeigt alle Aufträge für einen bestimmten Tag. Ich habe versucht, das HTML so, dass ich page-break-after: always zum erstellen einer logischen Seite drucken Pause und weiter. Allerdings, wenn der Benutzer druckt die Seite, gibt es oft überschneidungen, mehrere Aufträge auf der gleichen Seite, etc. Ich möchte einfach durchzusetzen, um einen schwer Seitenumbruch, dass Firefox, Safari und Chrome wird zu hören.

Mein HTML sieht so aus

<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>
<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>
<!-- repeat N times -->
<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>

und mein CSS ist im Grunde wie so:

.WOPrint
{
    max-width: 100%;
    padding-bottom: 3em;
}

.WOHeader
{
    display: block;
    page-break-inside: avoid;
}

.WOPageBreak
{
    height: 1px;
    width: 100%;
    float: left;
    page-break-after: always;
    display: block;
}

BEARBEITEN
In einem hackish Versuch ich gespielt haben, um mit der Einstellung der WOPrint Klasse min-height. Ändern auf 9 Zoll zu geben scheint mir genug Marge Zimmer für den Druck von allen Safari, Firefox und Chrome, wenn ich habe es auf einem standard-US-Papierformat. Dies ist sicherlich nicht der Weg, den ich möchte es zu beheben, aber ich will auch nicht zu haben, um das Rendern von PDF.

.WOPrint
    {
        max-width: 100%;
        padding-bottom: 3em;
        min-heihgt: 9in
    }
InformationsquelleAutor ashurexm | 2010-11-30
Schreibe einen Kommentar