避免孤立标题后跟列表

Question

我有一个<h2>标题，其中引入了<ol>列表，如下所示：

<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 jsfiddle demo打印如下：

[...]
 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 ...
[...]

我在<h2>之后和<ol>之前试图避免分页，但未成功：

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

Answer 1

我通过定义一个名为＆＃34; page-break＆＃34;的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强制分页，就可以将其与CSS <h2>选择器结合使用。

这里是JSFiddle。