Kann ich beim HTML-Druck einen Seitenumbruch erzwingen?

Ich erstelle einen HTML-Bericht, der druckbar sein wird und "Abschnitte" enthält, die auf einer neuen Seite beginnen sollen.

Gibt es eine Möglichkeit, etwas in das HTML / CSS einzufügen, das dem Browser signalisiert, dass er zu diesem Zeitpunkt einen Seitenumbruch erzwingen (eine neue Seite starten) muss?

Ich brauche das nicht, um in jedem Browser da draußen zu funktionieren. Ich denke, ich kann den Leuten sagen, dass sie einen bestimmten Satz von Browsern verwenden sollen, um dies zu drucken.

Fügen Sie eine CSS-Klasse mit dem Namen "pagebreak" (oder "pb") hinzu:

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

Fügen Sie dann ein leeres DIV-Tag ( oder ein beliebiges Blockelement, das ein Feld generiert ) hinzu, an dem der Seitenumbruch erfolgen soll.

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

Es wird nicht auf der Seite angezeigt, sondern beim Drucken die Seite aufteilen.

PS Vielleicht gilt dies nur für die Verwendung -after(und auch für das, was Sie sonst noch mit anderen <div>s auf der Seite tun ), aber ich stellte fest, dass ich die CSS-Klasse wie folgt erweitern musste:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

Versuchen Sie, diese Verbindung

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Ich wollte nur ein Update setzen. page-break-afterist jetzt ein Vermächtnis.

Offizielle Seite Staaten

Diese Eigenschaft wurde durch die Break-After- Eigenschaft ersetzt.

Sie können die CSS-Eigenschaft page-break-before(oder page-break-after) verwenden. Stellen Sie einfach page-break-before: alwaysauf diesen Block-Elemente (zB Position, div, p, oder tableElemente) , die auf einer neuen Zeile beginnen soll.

Um beispielsweise einen Zeilenumbruch vor einer Überschrift der 2. Ebene und vor einem Element in der Klasse newpage(z. B. <div class=newpage>...) zu verursachen, würden Sie verwenden

h2, .newpage { page-break-before: always }

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

Fügen Sie dies einfach dort hinzu, wo Sie die Seite benötigen, um zur nächsten zu gelangen (der Text "Seite 1" befindet sich auf Seite 1 und der Text "Seite 2" befindet sich auf der zweiten Seite).

Page 1
<div style='page-break-after:always'></div>
Page 2

Das funktioniert auch:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

Angenommen, Sie haben einen Blog mit Artikeln wie diesen:

<div class="article"> ... </div>

Das Hinzufügen zum CSS hat für mich funktioniert:

@media print {
  .article { page-break-after: always; }
}

(getestet und funktioniert unter Chrome 69 und Firefox 62).

Referenz:

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; Wichtiger Hinweis: Hier heißt es, This property has been replaced by the break-after property.aber es hat bei mir nicht funktioniert break-after. Auch das MDN-Dokument über break-afterscheint nicht spezifisch für Seitenumbrüche zu sein, daher ziehe ich es vor, das (funktionsfähig) beizubehalten page-break-after: always;.

• Wir können ein Seitenumbruch- Tag mit dem Stil " Seitenumbruch nach: immer " an der Stelle hinzufügen, an der wir den Seitenumbruch in die HTML-Seite einfügen möchten.
  
• " Seitenumbruch vor " funktioniert auch

Beispiel:

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

Beim Drucken der HTML-Datei mit dem obigen Code werden in der Druckvorschau drei Seiten angezeigt (eine für jeden HTML-Block " HTML_BLOCK_n "), wobei wie im Browser alle drei Blöcke nacheinander angezeigt werden.

Ich brauchte nach jeder dritten Zeile einen Seitenumbruch, während wir den Druckbefehl im Browser verwenden.

Ich habe <div style = 'page-break-before: always;'> </ div> hinzugefügt

nach jeder 3. Reihe und meinem Eltern-Div haben Anzeige: flex; also habe ich display entfernt: flex; und es funktionierte wie ich will.

CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

HTML

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

@ Chris Doggett macht vollkommen Sinn. Obwohl ich auf lvsys.com einen lustigen Trick gefunden habe , der tatsächlich auf Firefox und Chrome funktioniert. Platzieren Sie diesen Kommentar einfach an einer beliebigen Stelle, an der der Seitenumbruch eingefügt werden soll. Sie können das <p>Tag auch durch ein beliebiges Blockelement ersetzen .

<p><!-- pagebreak --></p>