Halten Sie ein HTML-element aus, die sich über mehrere Seiten, wenn Sie gedruckt werden

Habe ich den folgenden HTML-Code, den ich gerne halten würde ungültig werden, wenn über mehrere Seiten. Das problem ist, dass wenn ich mit page-break-before oder after, es wird jedes element auf einer eigenen Seite. Das andere problem das ich habe ist, dass wenn ich display: block entweder auf der cell CSS-Klasse oder die wrap Klasse, das DIV oder LI bekommt immer noch gebrochen. Ich habe einen print Medien CSS-Datei und eine CSS-Datei für den Bildschirm als auch. Ich will, dass die <li class="cell"> element und dessen Inhalt aufgebrochen.

        <div class="pad">
        <h1 style="text-align: center; margin: 10px 0">

            Work Orders for Jan 05, 2011
        </h1>
        <p class="printHidden">
            <a href="/orders/print-all/date/2011-01-05">Print All Work Orders</a>
        </p>
        <ul class="workorders">                    
            <li class="cell">
                <div class="wrap" id="146">

                    <div class="scheduled">
                        <p>
                            <strong>Work Order:</strong> <a href="/orders/view/work-order/146">158801</a>
                        </p>
                        <p>
                            <strong>Client:</strong> Client Name
                        </p><br>

                        <b>Resources</b>
                        <ul>
                            <li>
                                <a href="/resources/view/resource-id/5" id="Person-5">Mikell McLaindon</a>
                            </li>
                            <li>
                                <a href="/resources/view/resource-id/9" id="Person-9">Jose Copper</a>

                            </li>
                        </ul>
                    </div>
                    <div class="unschedule printHidden">
                        <h1 style="text-align: center; margin: 10px 0 10px; font-size: 12px; font-weight: bold;">
                            Unschedule Resource for 15880-PW
                        </h1>
                    </div>
                </div>
            </li>
            {... removed for brevity ...}
  • Konnte Sie nach dem mark-up, die gesehen wird, durch den browser (view source im browser), anstatt die php - /pre-Prozessor-version?
  • was ist das Seitenformat?
  • Ihre PHP/Perl/whatever-code ist irrelevant; Sie sollte uns zeigen das gleiche HTML-Code wie der browser sieht (Tipp: Quelltext Anzeigen).
  • Saounkine: Standard-US 8,5"x11" Seite Größe.
InformationsquelleAutor ashurexm | 2011-01-18
  1. 26

    EDIT: RICHTIGE LÖSUNG

    Finden Sie unter: http://www.w3schools.com/css/pr_print_pagebi.asp
    Also, wenn Sie fügen Sie die folgenden CSS-es sollte dein problem lösen:

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

    Alle wichtigen desktop-Browser unterstützen nun diese.

    Allerdings gibt es auch page-break-after:avoid und page-break-before:avoid die Sie hinzufügen können, um jedes element innerhalb der .pad Klasse, um zu produzieren das gleiche Ergebnis in einigen älteren Browser-Versionen.

    @media print
{
    div.pad * { 
        page-break-after:avoid;
        page-break-before:avoid;
    }
}

    http://www.w3schools.com/Css/pr_print_pagebb.asp

    http://www.w3schools.com/css/pr_print_pageba.asp

    ALTE ANTWORT:

    Es klingt wie Sie versuchen, passen Sie etwas auf eine Seite, die nicht auf eine Seite passen. Ich würde versuchen ein stylesheet mit media="print"...

    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" />

    ...das verringert das font-size, padding, usw. alle diese Elemente, so dass Sie KÖNNEN einen Seitenumbruch vor diesem Abschnitt und haben es auf die Seite passt.

    • Ich spreche nicht von nur einem element, es ist eine Reihe von "Boxen", wenn Sie werden und manchmal ist ein Feld passiert, werden gebrochen durch einen Seitenumbruch. Ich möchte halten Sie die <li class="Zelle"> und seine Inhalte zu verhindern gebrochen.
    • Ah, natürlich. Dann Ersetze ich meine Antwort mit einer richtigen Lösung sollte ich eins finden.
    • ...und wie es aussieht habe ich einen gefunden
    • +1 für die Antwort, für verbessern Ihre Antwort, und halten die alte eins =)
    • Genial! Danke.
    InformationsquelleAutor mVChr
Schreibe einen Kommentar