Kann ich erzwingen einen Seitenumbruch in HTML drucken?

Mache ich ein HTML-Bericht ist druckbar, und es hat "Abschnitte", die gestartet werden soll in einer neuen Seite.

Gibt es eine Möglichkeit, etwas in den HTML/CSS, dass das signal an den browser, die es braucht, zu zwingen einen Seitenumbruch (Beginn einer neuen Seite) an diesem Punkt?

Ich brauche das nicht, um zu arbeiten in jedem browser gibt, ich denke, ich kann sagen, die Menschen eine bestimmte Menge von Browsern, um zu drucken.

InformationsquelleAutor Daniel Magliola | 2009-11-02
  1. 266

    Hinzufügen einer CSS-Klasse namens "pagebreak" (oder "pb"), etwa so:

    @media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

    Fügen Sie ein leeres DIV-tag ( oder jedes block-element erzeugt eine box ), wo die Seite Pause.

    <div class="pagebreak"> </div>

    Wird es nicht zeigen, bis auf der Seite, aber brechen wird die Seite beim drucken.

    P. S. Vielleicht ist dies nur gilt bei Verwendung -after (und auch, was du sonst tun mit anderen <div>s auf der Seite), aber ich fand, dass ich hatte zu ergänzen, die die CSS-Klasse wie folgt:

    @media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}
    • Aber wie alle guten Dinge in der CSS klappt das nicht immer konsequent auf der ganzen Linie, so testen Sie die lebenden daylights aus ihm heraus, daß Sie wütend Benutzer Fragen sich, warum Ihre Website Drucke Haufen zusätzliche leere Seiten!
    • Nach MDN, page-break-after "gilt für block-Elemente erzeugen eine box", also mit einem leeren <span> element wird nicht funktionieren. Es ist eine bessere Idee, um es anzuwenden, um ein Stück von Ihrem Inhalt. Siehe developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
    • Guten Fang. Ich hatte hauptsächlich diese an meinem alten job in einem WebBrowser-Steuerelement in WinForms, die verwendet, DH, der gold-standard in der folgenden Normen.
    • Dies funktionierte nicht für mich in Chrom... ich versuche zu tun, einen Seitenumbruch innerhalb nach einem <tr> in einem <table>, geht das in diesem Fall ?
    • Aus irgendeinem Grund, wenn mit diesem trick in Chrom, 1 Zeile der Pixel der nächsten Seite war undicht zu vorherigen (bemerkbar, wenn mit hintergrund-Farbe). Ich reparierte es mit .pagebreak { min-height: 1px; page-break-before: always; }
    InformationsquelleAutor Chris Doggett
  2. 39

    Versuchen, diese link

    <style>
@media print
{
h1 {page-break-before:always}
}
</style>
    • Ich denke, das ist eine bessere Antwort als es sich nicht um mangling der HTML-zu erreichen, einen optischen Effekt.
    • Eigentlich mag ich die anderen besser, denn es gibt mir mehr Kontrolle. Kann ich immer ordnen Sie die Klasse "pagebreak" nur für den H1 ist, sollte die Seite springen. Aber es ist immer noch eine gute Lösung. +1 für @media, obwohl der Bildschirm sollte ignorieren page-break-before, denke ich. Danke!
    • der h1 ist ein Beispiel von, was Sie verwenden können, wie ein tag für den Druck brechen. Sie können Ersatz-und tag-Namen, die Sie mögen. Sie können auch page-break-after:always
    • h1 ist kein gutes Beispiel, da es bedeutet, dass ein 1st-level-Position, und eine Seite sollte in der Regel nur mit einer solchen überschrift.
    • Wenn Sie möchten, überspringen Sie die ersten Kopfzeile auf der ersten Seite, versuchen h1:not(:first-child) { page-break-before:always; }
    InformationsquelleAutor jfarrell
  3. 6

    Können Sie die CSS-Eigenschaft page-break-before (oder page-break-after). Setzen Sie einfach page-break-before: always auf diese block-level-Elementen (z.B. überschrift, div, p oder table Elemente), das sollte für den Anfang einer neuen Zeile.

    Beispielsweise verursachen einen Zeilenumbruch vor jedem 2. Ebene überschrift und vor jedem element in der Klasse newpage (z.B. <div class=newpage>...), die Sie verwenden würden,

    h2, .newpage { page-break-before: always }
    InformationsquelleAutor Jukka K. Korpela
  4. 2

    Wollte nur ein update. page-break-after ist eine alte Eigenschaft jetzt.

    Offizielle Seite Staaten

    Diese Eigenschaft wurde ersetzt durch die Pause-nach Eigenschaft.

    InformationsquelleAutor shazyriver
  5. -1

    Diese scheint nicht zu funktionieren auf meiner Seite. Ich bin putting das div-tag mit der page-break-Klasse nach x Anzahl von divs ausgegeben wurden, so dass die bedruckte Seite wird 'Pause' sauber. Und ja - ich habe überprüft und erneut überprüft mein code angesehen und die source-Seite in meinem browser.

    • Hoppla - nach der note, die ich sah, zu spät, veränderte ich den CSS-code zu verwenden "break-after:Seite;" und es funktioniert jetzt!
    InformationsquelleAutor Jim Giner
  6. -6

    @Chris Doggett macht auch Sinn.
    Obwohl, ich fand einen lustigen trick auf lvsys.com, und es funktioniert tatsächlich auf firefox und chrome. Setzen Sie einfach diesen Kommentar überall, wo Sie möchten, dass der Seitenumbruch eingefügt werden soll. Sie können auch ersetzen die <p> tag mit jedem block-element.

    <p><!-- pagebreak --></p>
    • Das funktioniert nicht
    • Hat bei mir nicht funktioniert.
    InformationsquelleAutor Oniya Daniel
Schreibe einen Kommentar