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;
}