2

HTML ドキュメントで空のページを強制するにはどうすればよいですか? タイトル ページがあり、その後改ページが強制されます (以下のルール)。問題は、残りのコンテンツがすぐ次のページに表示されることです。ここでは、タイトル ページと残りのコンテンツを 1 つの空のページで分割したいと考えています (下の図)。

HTML:

<div class=title-page">
  title
</div>

<div class="content">
  blah blah
</div>

CSS:

.title-page {
  page-break-after: always;
}

期待される結果：

 -------
| title |
|       |
|     1 |
 ------- 
 -------
|       |
|       |
|     2 |
 -------
 -------
| blah  |
| blah  |
|     3 |
 -------

<div>タイトルページと残りのコンテンツの間に空を挿入してから、それを指定することで実行できることに気付きpage-break-after: always;ました。ただし、空の div を挿入することは意味的に正しくありません。CSSのみを使用して同じ結果を達成する方法はありますか?

EDIT：page-break-after: left;この場合、最初のページはデフォルトで左ページであるため、で行うこともできます。文書の途中で、現在のページが左か右か分からない場合はどうでしょうか。または、複数の空のページを挿入したい場合。それはまだCSSで行うことができますか？

4

1 に答える 1

6

Chrome と IE では機能するが、Firefox (バージョン 31) では機能しない方法は、最初の要素の最後に追加された疑似要素を使用し、そのdiv前に改ページを指定することです。疑似要素を空にしないようにするには (ブラウザーは改ページを 1 つに結合する可能性があります)、そこに改ページなしのスペースを挿入します。

.title-page:after {
  display: block;
  content: "\A0";
  page-break-before: always;
}

これは Firefox では機能しないため、ダミーdiv要素を使用することをお勧めします。要素が本当に空の場合、これによって Firefox で空のページが発生することはないことに注意してください<div></div>。代わりに、空白として表示されるコンテンツをそこに置きます。

<div class="empty-page">&nbsp;</div>

（付き.empty-page { page-break-after: always; }）。

beforeprintイベントによってトリガーされるコードで、JavaScript を使用してこのようなダミー要素を動的に追加することもできます。

于 2014-08-04T10:02:30.410 に答える