ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS で Web ページのページング改ページ後のプロパティを制御する
CSS で Web ページのページング改ページ後のプロパティを制御する
- 黄舟オリジナル
- 2017-07-08 09:49:322336ブラウズ
page-break-before および page-break-after CSS プロパティ は、画面上の Web ページの表示を変更しません。これら 2 つのプロパティは、ファイルの印刷方法を制御するために使用されます。各印刷属性は、自動、常時、左、右の 4 つの設定値を設定できます。このうち、デフォルト値は Auto です。改ページ 記号 (改ページ) は、必要な場合にのみ設定する必要があります。 page-break-before が always に設定されている場合、プリンタは特定のコンポーネントに遭遇したときに新しい印刷ページを再開します。 page-break-before が left に設定されている場合、指定されたコンポーネントが左の空白ページに表示されるまで改ページ記号が挿入されます。 page-break-before が right に設定されている場合、指定されたコンポーネントが右側の空白ページに表示されるまで改ページ記号が挿入されます。 page-break-after 属性は、指定されたコンポーネントの前ではなく後に改ページ記号を追加します。次の プログラムでは、これらのプロパティの設定を確認できます。
<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>
page-break-after は、CSS で印刷ページネーションを設定するために使用される CSS プロパティであり、すべてのブラウザをサポートしています。
page-break-after には次のオプションがあります:
auto デフォルト。必要に応じて要素の後に改ページを挿入します。
要素の後には必ず改ページを挿入してください。要素の後に改ページを挿入することは避けてください。
left 要素の後に空白の左ページが表示されるまで、十分な改ページを行います。
right 要素の後に空白の右ページまでの十分な改ページ。
inherit は、
page-break-after 属性の設定が親要素
から継承される必要があることを指定します。 一般的に使用されるページング タグは次のとおりです:
[CSS オンライン] - サンプル コード857c3ebb7e5edb39039d9fe273dcd5690ae3206a6e55e6b96e3d7e5a017890ff < ; /span>94b3e26ee717c64999d7867364b1b4a3同様に、テーブルの CSS 印刷スタイルを設定することもできます。以下は例で、各テーブルをページ単位で印刷します。
[CSSオンライン] - サンプルコード 100db36a723c770d327fc0aef2ce13b1
<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>上記の例では、印刷プレビューで2つのテーブルのデータが2つに分離されています。ページが印刷されます。これは、page-break-after 属性を使用した結果です。
注意: 各メソッドは表の中央でページ区切りされています。
以上がCSS で Web ページのページング改ページ後のプロパティを制御するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。