web-dev-qa-db-ja.com

見出しの直後に改ページを回避するにはどうすればよいですか

HTML 4.01/CSS 2.1ドキュメントがあり、H3見出し、短い（1行）段落ブロック、およびいくつかの項目を含む順序なしリストが含まれています。

<h3>Heading!</h3>

<p>Some things:</p>

<ul>
  <li>Thing one</li>
  <li>Thing B</li>
  <li>Thing 4</li>
</ul>

私の問題は、ドキュメントを印刷するとき（または、wkhtmltopdfを使用してPDF）としてレンダリングするとき）、見出しの直後、段落の前で改ページが発生することがあることです。かなりばかげているように見えます。

ヘッダーの直後に改ページを避けるように規定する方法はありますか？ （HTML5/CSS3ソリューションが大幅に簡素化されるのであれば、私は嫌いではありません。）

注：提案に従って、CSSプロパティpage-break-after: avoidを使用してみました。ただし、これは WebKit または Mozilla ベースのブラウザでは実際には機能しません。

htmlcsspage-break
29
detly

CSSプロパティ以降 page-break-after: avoid は WebKit または Mozilla ベースのブラウザでは機能しません。 page-break-inside: avoid 見出しと許容可能な量のテキストの上：

CSS

<style type="text/css">
    .nobreak {
        page-break-inside: avoid;
    }
</style>

HTML

<div class="nobreak">
    <h3>Heading!</h3>

    <p>Some things:</p>

</div>

    <ul>
      <li>Thing one</li>
      <li>Thing B</li>
      <li>Thing 4</li>
    </ul>
16
Jason

これは非常にハッキーなソリューションですが、私にとってはうまくいきます。

h1 {
    page-break-inside: avoid;
}
h1::after {
    content: "";
    display: block;
    height: 100px;
    margin-bottom: -100px;
}

基本的に、後のコンテンツに影響を与えることなく、<h1>のサイズを大きくする非表示の要素を作成します。 page-break-inside: avoidが適用され、<h1>全体（ハッキー要素を含む）がページに収まらない場合、ブラウザは<h1>を次のページに移動するように強制されます。

17
Zenorbi