HTML Page Break Issue

Question

I am converting HTML into PDF and its working perfectly but I have an issue with how data is being displayed.

I have an array of strings and I am looping through them and displaying them within my ejs template.For example:

<div style="page-break-after: auto; padding: 10px;">
  <h3>Cost Saving Calculation:</h3>
  <p><%= modules[i].costSavedInfo %></p>
</div>

<div style="page-break-after: auto; padding: 10px;">
  <h3>Culture Change</h3>
  <p><%= modules[i].cultureChange %></p> 
</div>

<div style="page-break-after: auto; padding: 10px;">
  <h3>Other Efficiency</h3>
  <p><%= modules[i].otherEfficieny %></p>
</div>

The issue:

When the PDF is generated the text is displayed across 2 pages like this:

In the above image half the text is on one pdf page and other on second page.

I am not sure whether it is possible or not but how can I change the HTML that it moves the text over to a new page if its going to be displayed across 2 pages. Now the length of the text in the array could be anything.There are no word limitations.

Is this even possible?

Answer 1

The problems you have when a page break confuses your paragraphs are called orphans and widows.

You can define via CSS how many lines are not separated before breaking the page.

Please check out these descriptions:

widows - "The widows property in CSS controls the minimum number of lines of a paragraph that can fall to a new page."

orphans - "The orphan property controls the minimum number of lines of a paragraph that can be left on the old page."

I think, you want to define both properties to have a senseful output.