css - Avoid orphan title followed by list

Question

I have an <h2> title that introduce an <ol> list as follow:

<h2>A title</h2>
<ol>
<li>Lorem ipsum dolor sit amet,<br />consectetur adipisicing elit, sed<br />do eiusmod tempor incididunt ut<br />labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...</li>
<li>Lorem ipsum dolor sit amet,<br />consectetur adipisicing elit, sed<br />do eiusmod tempor incididunt ut<br />labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...</li>
<li>Lorem ipsum dolor sit amet,<br />consectetur adipisicing elit, sed<br />do eiusmod tempor incididunt ut<br />labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...</li>
</ol>

This pattern (title+list) is repeated a number of times and I have issues when printing because the title is sometimes separated from it's following list.

As an illustration of the problem: this jsfiddle demo gets printed as follows:

[...]
 3. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed
    do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...

Some title

================================================================================

 1. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed
    do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ...
[...]

I've unsuccessfully tried to avoid page breaks after <h2> and before <ol>:

h2 {
    page-break-after: avoid;
}
ol {
    page-break-before: avoid;
}

Answer 1

我通过定义一个名为“page-break”的 CSS 类来解决这个问题，该类具有规则page-break-before: always !important，并将其应用于<h2>发生搞砸的分页符的地方。

<h2 class="page-break">Some title</h2>

<style>
    @media print {  
        p.padding {
            margin-bottom: 9cm;
        }
        ol li {
            page-break-inside: avoid;
        }
        h2 {
            page-break-after: avoid;
        }
        ol {
            page-break-before: avoid;
        }

        .page-break {
            page-break-before: always !important;   
        }
    }
</style>

现在看起来像这样：

:nth-of-type如果您希望每三四个<h2>s强制分页，这可能可以与 CSS选择器结合使用。

这是一个JSFiddle。