如何避免在标题后立即分页 [英] How do I avoid a page break immediately after a heading

问题描述

我有一个HTML 4.01 / CSS 2.1文档，其中包含一个H3标题，后跟一个短（一行）段落块，然后是一个无序列表，其中包含多个项目：

I have an HTML 4.01/CSS 2.1 document that includes an H3 heading followed by a short (one line) paragraph block and then an unordered list with several items:

<h3>Heading!</h3>

<p>Some things:</p>

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

我的问题是，当我打印文档（或使用 wkhtmltopdf ），有时会在标题之后，段落之前出现分页符，看起来很蠢。

My problem is that when I print the document (or render it as a PDF using wkhtmltopdf), sometimes a page break will occur right after the heading, before the paragraph, which looks quite silly.

方式规定分页符应该在标题后立即避免？ （我不反对HTML5 / CSS3解决方案，如果这明显简化了东西。）

Is there a way to stipulate that page breaks should be avoided immediately after a header? (I'm not averse to HTML5/CSS3 solutions, if that simplifies things significantly.)

注意： CSS属性 page-break-after：avoid 。这在任何 WebKit 或

Note: following suggestions, I tried using the CSS property page-break-after: avoid. This doesn't really work in any WebKit or Mozilla based browsers, though.

推荐答案

由于CSS是基于Mozilla的浏览器属性 page-break-after：avoid 不可在任何 WebKit 或基于Mozilla 的浏览器，请使用 page-break-inside ：避免 超出标题和可接受的文字数量：

Since the CSS property page-break-after: avoid doesn't work in any WebKit or Mozilla based browsers, use the page-break-inside: avoid over the heading and an acceptable amount of the text:

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

HTML

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>

这篇关于如何避免在标题后立即分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！