Preventing text from splitting over two pages

Question

This html is at the end of ebook. When converting html to mobi, then preview ebook on Kindle, the above text at the end always splitted over two pages in ebook. As this is the last page, I want stop this text from splitting over pages. I think I should add around this text code the page-break-before:avoid or page-break-after:avoid property. I am not sure, which one suitable for use in this case, page-break-after:avoid or page-break-before:avoid?

<hr/>
<div>
<FONT SIZE=-1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</FONT>
</div>
</body> 
</HTML>

For example, should I use this sample, or page-break-before:avoid?

<div style="page-break-after:avoid"></div>
<hr/>
<div>
<FONT SIZE=-1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</FONT>
</div>
<div style="page-break-after:avoid"></div>
</body> 
</HTML>

Answer 1

You should actually be using this instead:

page-break-inside: avoid;

Answer 2

The state of eBooks is similar to that confronting Donald Knuth before he invented TeX—only worse. This is just one instance where 'flow' is badly coerced to pages. It is generally wise to use

page-break-inside: avoid;

but you have no guarantee that this will render reliably across different eBook readers. Note that the term is 'avoid' in any case. Even more fraught are any attempts to prevent headers from being rendered at the bottom of the page ('widowed'). Here you would think that e.g.

h2 {
page-break-after: avoid;
}

would actually work, but implementation is very variable. Kindle is currently (2020) especially frustrating. One trick that will help you to prevent unsightly text across two pages is:

p {
orphans: 3;
widows: 3;
}

as this inhibits writing of just one or two lines on either side of the break. It won't of course help with a widowed header.

You can even embed multiple related XHTML elements you don't want to separate in a div with the page-break-inside: avoid; property (put it in a class in your CSS) but even this is variable in its effects. You will find that tools like pandoc also do their best to 'correct' things badly, so you may need to play with Sigil.

A further irritating problem is where a Figure is separated from its caption. Sometimes the simplest answer here is just to include the caption in the JPEG or PNG image. A caution with this approach if you—wisely—wish to cater for the visually impaired, is to make sure that you put in an appropriate alt tag!

A further issue with Kindle is that if you try to put a class in a <p> tag, it will be stripped out. A minefield!

My 2c, Dr Jo.