17

ヘッダー (h1、h2、h3...) と段落を含む大きな HTML ドキュメントがあります。ドキュメントを印刷するときに、ドキュメントの下部にあるヘッダーが自動的に次のページに移動するようにします。

ここに画像の説明を入力

どのようにできるのか？段落で「orphans: 3」CSS を使用し、「p」タグで動作しますが、h1 または h2 では動作しません。

@page {
  size: A4;
}

p {
  orphans:3;
}

h1, h2 {
  orphans:3
}

アクションの完全な例:

  • 1-2 ページ: 孤立した段落は正常に動作します。
  • 2-3 ページ: ヘッダーが機能しません。

要件：

  • HTML にはメインの div コンテナが 1 つあります。
  • HTML を変更しないでください。
  • ブラウザーのサポートは重要ではありません (私の特定の仕事では)。
  • CSS のトリックが必要です (できれば JS や Jquery は必要ありません)。
  • page-break-before:always は使用できません。ヘッダーがページの下部に表示されたときにのみ次のページに移動するようにするためです。
4

1 に答える 1

15

タイポグラフィでは、孤児は次のとおりです。

ページまたは列の下部に単独で表示される段落の開始行で、残りのテキストから分離されています。

ただし、HTML では<h1>段落が<p>異なる場合、使用する必要があるのは、その段落の後に改ページを配置しないようにレイアウト エンジンに指示するプロパティです (次の段落を前のページに移動する副作用があります - 適切な場合 - またはヘッダーを移動します)。次のページへ。break-after

h1, h2 {
    break-after: avoid-page;
}

互換性に関する注意:break-after設定は真のワーキング ドラフトであり、基本的な機能でさえ広くサポートされていません (特に Internet Explorer 10ではサポートされています)。これを回避するには、同様の意味を持つ別のプロパティを使用できます。

h1, h2 {
    page-break-after: avoid;
}

page-break-afterページと列の両方に適用されることに注意してください。page-break-afterは FF で十分にサポートされていません (これはバグです)。互換性が重要で、段落が複数のページにまたがらない場合は、ラップ<h1>と<p>コンテナー内で回避策を講じて (たとえば )、次のよう<section>に適用できます。page-break-inside

section {
    page-break-inside: avoid;
}

IMO は、そのバグが修正されるまでプレフィックスと組み合わせpage-break-afterてpage-break-inside使用page-break-inside​​する必要があります。-moz

于 2016-01-15T10:46:09.897 に答える