Heim >Web-Frontend >CSS-Tutorial >css: page-break-before:always und page-break-after:always werden angezeigt
Die CSS-Eigenschaften
page-break-before und page-break-after ändern nicht die Anzeige der Webseite auf dem Bildschirm. Diese beiden Eigenschaften werden zur Steuerung verwendet Drucken der Datei. Für jedes Druckattribut können 4 Einstellungswerte festgelegt werden: automatisch, immer, links und rechts. Unter diesen ist „Auto“ der Standardwert. Sie müssen das Symbol „Seitenumbruch“ (Seitenumbrüche) nur bei Bedarf festlegen. Wenn „page-break-before“ auf „Immer“ eingestellt ist, startet der Drucker eine neue Druckseite, wenn er auf eine bestimmte Komponente trifft. Wenn page-break-before auf left gesetzt ist, werden Seitenumbruchsymbole eingefügt, bis die angegebene Komponente auf einer linken leeren Seite erscheint. Wenn page-break-before auf right gesetzt ist, werden Seitenumbrüche eingefügt, bis die angegebene Komponente auf einer leeren Seite rechts erscheint. Das Attribut „page-break-after“ fügt das Seitenumbruchsymbol nach der angegebenen Komponente ein, nicht davor. Im folgenden Verfahren können Sie die Einstellungen dieser Eigenschaften sehen. Das Obige ist das Ergebnis von BaiduDer rote Absatz: Wenn eine bestimmte Komponente gefunden wird, startet der Drucker eine neue Druckseite
Worauf bezieht sich diese bestimmte Komponente?Was ist der andere Unterschied zwischen den beiden?
Der folgende Code wurde ebenfalls übergeben, der Effekt in der Druckvorschau ist derselbe
<HTML> <HEAD> <TITLE>Listing 14-4</TITLE> </HEAD> <BODY> <DIV>This is the first DIV.</DIV> <DIV STYLE="page-break-before:always">This is the second DIV.</DIV> <DIV STYLE="page-break-after:always">This is the third DIV.</DIV> <DIV>This is the fourth DIV.</DIV> <DIV STYLE="page-break-before:right">This is the fifth DIV.</DIV> <DIV STYLE="page-break-after:right">This is the sixth DIV.</DIV> <DIV>This is the last DIV.</DIV> </BODY> </HTML>vorher dient zum Einfügen des Seitenvorschubzeichens vor dem
Boxmodell
und danach hinten. Sie können 1.html
und 2.html
<style> h2{page-break-after: always;} </style> 1 <h2>---这个在前1页---</h2> 2 <h2>---这个在前2页---</h2>
zum Testen verwenden und Sie werden sehen, dass der Druckeffekt unterschiedlich ist
<style> h2{page-break-before: always;} </style> 1 <h2>---这个在前2页---</h2> 2 <h2>---这个在前3页---</h2>Das Der intuitivste Weg besteht darin, Beispiele zum Verständnis zu verwenden.
Beachten Sie, dass CSS definiert, ob Zeilenumbrüche vor h2 oder nach h2 eingefügt werden sollen
CSS Sie können es selbst ausprobieren und die Wirkung sehen.
Das obige ist der detaillierte Inhalt voncss: page-break-before:always und page-break-after:always werden angezeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!