Avoid orphan title followed by list - css

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

I solved this by defining a CSS class called "page-break" which has the rule page-break-before: always !important and I applied it to the <h2> where the screwed up page break was occurring.
<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>
Now it looks like this:
This might be able to be combined with the CSS :nth-of-type selector if you're looking to force a page break every three or four <h2>s .
Here's a JSFiddle.