Heim > Web-Frontend > CSS-Tutorial > Steuern Sie die Seitenumbruch-Nachher-Eigenschaft von Webseiten in CSS

Steuern Sie die Seitenumbruch-Nachher-Eigenschaft von Webseiten in CSS

黄舟
Freigeben: 2017-07-08 09:49:32
Original
2267 Leute haben es durchsucht

page-break-before und page-break-after CSS Eigenschaften ändern nicht die Anzeige von Webseiten auf dem Bildschirm. Diese beiden Eigenschaften werden zur Steuerung des Druckens verwendet Dateien. Für jedes Druckattribut können 4 Einstellungswerte festgelegt werden: automatisch, immer, links und rechts. Unter diesen ist „Auto“ der Standardwert. Sie müssen die Seitenumbrüche (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 Seitenumbruchsymbole 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 Programm können Sie die Einstellungen dieser Attribute sehen



page-break-after wird verwendet, um die Druckpaginierung in CSS festzulegen CSS-Attribut, unterstützt alle Browser.
<HTML>
<HEAD>
<TITLE>Listing 14-4</TITLE>
</HEAD>
<BODY>
<p>This is the first p.</p>
<p STYLE="page-break-before:always">This is the second p.</p>
<p STYLE="page-break-after:always">This is the third p.</p>
<p>This is the fourth p.</p>
<p STYLE="page-break-before
:right
">This is the fifth p.</p>
<p STYLE="page-break-after:right">This is the sixth p.</p>
<p>This is the last p.</p>
</BODY>
</HTML>
Nach dem Login kopieren

page-break-after hat die folgenden Optionen:

Auto-Standard. Fügen Sie bei Bedarf einen Seitenumbruch nach dem Element ein.

Fügt immer einen Seitenumbruch nach dem Element ein.

Vermeiden Sie das Einfügen von Seitenumbrüchen nach Elementen.
left Ausreichend Seitenumbrüche nach dem Element, bis hin zu einer leeren linken Seite.
right Ausreichend Seitenumbrüche nach dem Element, bis hin zu einer leeren rechten Seite.
inherit gibt an, dass die Einstellung des
page-break-after-Attributs vom übergeordneten Element
geerbt werden soll. Unsere am häufigsten verwendeten Paging-Tags sind:
[CSS Online]-Beispielcode

Ebenso können wir auch den CSS-Druckstil der Tabelle festlegen. Das Folgende ist ein Beispiel, jede Tabelle wird in Seiten gedruckt:
[CSS Online]-Beispielcode


<head>
<style>
@media print
{
table {page-break-after:always;}
}
</style>
</head>
<body>
<table><tr><td>第一个表格</td></tr><tr><td>第一个表格</td></tr></table>
<table><tr><td>第二个表格</td></tr><tr><td>第二个表格</td></tr></table>
</body>
</html>
Nach dem Login kopieren
Im obigen Beispiel ist The Die Daten der beiden Tabellen werden in der Druckvorschau separat auf zwei Seiten gedruckt. Dies ist der Effekt der Verwendung des Attributs „Seitenumbruch danach“.


Bitte beachten Sie: Jede Methode wird in der Mitte einer Tabelle paginiert.

Das obige ist der detaillierte Inhalt vonSteuern Sie die Seitenumbruch-Nachher-Eigenschaft von Webseiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage