I'm generating PDF documents based on HTML content and I'm struggling with a page break issue. I have a document with many paragraphs, using numbered lists. These work just fine, unless it is a multiline paragraph that extends beyond the end of the page.
In that case only the paragraph number stays on the current page, and the entire text of the paragraph shifts to the next page.
I would like to either shift number and all text to the next page - or - show the first line of the text on the current page. In other words, always keep paragraph number and text together.
I tried putting section or div tags around the list item and use break-inside: avoid, but that did not seem to have any effect.
Can anyone tell me what am I missing here?
ol {
counter-reset: section;
list-style-type: none;
padding-left: 0;
list-style-position: outside;
}
li {
margin-top: 10px;
display: block;
padding-left: 40px;
position: relative;
}
li::before {
counter-increment: section;
content: counters(section, ".") ". ";
width: 4em;
position: absolute;
left: 0;
}
section {
break-inside: avoid;
} <!DOCTYPE html>
<html>
<b>Summary of the challenge</b>
<ol>
<li>
A paragraph with a single line of text works fine.
</li>
<section>
<li>
A multiline paragraph will break between the number and the text.
</li>
</section>
</ol>
</html>