Keeping a subheading with its first line of text in an epub

Question

I'm converting an InDesign document to Epub. I'm using Microsoft Edge as the epub reader (that might be a mistake...). Edge is open in an approximately 1280x1024 window and is showing two "pages" of text at a time. Rolling the mouse button "turns pages."

My problem occurs with this turn-page context that Edge is using. Rather than simply scrolling through an entire chapter, it's imposing the context of a book. Consequently, a subheader may appear on the last line of the right-hand "page" with its associated text block on the next page.

My Subheader
Lorem ipsum...

becomes

My Subheader

And then you turn the "page" to find

Lorem ipsum...

From this question I learned about page-break-inside: avoid; and page-break-before: always;, but those appear to be block-level CSS attributes, forcing me to decide with how much of the following text the subheader must be grouped. E.G.,

<div style="page-break-inside: avoid;"><p class="subhead-01">My Subheader</p>
<p class="normal">Lorem ipsum</div>...</p>

Now, I know I'm wishing for world peace, but is there a CSS attribute I would assign to the subheader block that affectively means, "keep this block with the first line of the next block"? Something along the lines of:

<p class="subhead-01" style="keep-with: next-line;">My Subheader</p>
<p class="normal">Lorem ipsum...</p>

Answer 1

page-break-after: avoid should work, if the reading system supports it.

Answer 2

This worked for me. Create a new div

CSS

div.Heading-Block {
  display: block;
  break-inside: avoid;
}

HTML

<div class="Heading-Block">
      <p class="Heading-2">Your subheader</p>
      <p class="BodyText">Your paragraph</p>
</div>