Answers.Body: <p><code>page-break-after: avoid</code> should work, if the reading system supports it.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-02T14:54:49.817Z
Answers.LastActivityDate: 2018-02-02T14:54:49.817Z
Answers.UserDisplayName: thinkulum
Answers.Body: <p>This worked for me.
  Create a new div</p>
  <p>CSS</p>
  <pre><code>div.Heading-Block {
    display: block;
    break-inside: avoid;
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;Heading-Block&quot;&gt;
        &lt;p class=&quot;Heading-2&quot;&gt;Your subheader&lt;/p&gt;
        &lt;p class=&quot;BodyText&quot;&gt;Your paragraph&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-04-30T15:18:42.853Z
Answers.LastActivityDate: 2022-05-01T07:41:31.427Z
Answers.LastEditDate: 2022-05-01T07:41:31.427Z
Answers.UserDisplayName: Mark
Body: <p>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."</p>
  
  <p>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.</p>
  
  <pre><code>My Subheader
  Lorem ipsum...
  </code></pre>
  
  <p>becomes</p>
  
  <pre><code>My Subheader
  </code></pre>
  
  <p>And then you turn the "page" to find</p>
  
  <p><code>Lorem ipsum...</code></p>
  
  <p>From <a href="https://ebooks.stackexchange.com/questions/1235/keeping-lines-together-in-epub">this question</a> I learned about <code>page-break-inside: avoid;</code> and <code>page-break-before: always;</code>, 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., </p>
  
  <pre><code>&lt;div style="page-break-inside: avoid;"&gt;&lt;p class="subhead-01"&gt;My Subheader&lt;/p&gt;
  &lt;p class="normal"&gt;Lorem ipsum&lt;/div&gt;...&lt;/p&gt;
  </code></pre>
  
  <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>
  
  <pre><code>&lt;p class="subhead-01" style="keep-with: next-line;"&gt;My Subheader&lt;/p&gt;
  &lt;p class="normal"&gt;Lorem ipsum...&lt;/p&gt;
  </code></pre>
  
Tags: <epub><css>
Title: Keeping a subheading with its first line of text in an epub
UserDisplayName: JBH
ThreadText: # Keeping a subheading with its first line of text in an epub
  
  (Asked by: username_0 on 2018-02-02)
  
  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., 
  My Subheader
  Lorem ipsum...
  
  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:
  My Subheader
  Lorem ipsum...
  
  **Tags:** epub, css
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2018-02-02. Score: 1 | Accepted answer
  
  `page-break-after: avoid` should work, if the reading system supports it.
  
  
  ---
  
  ### Answer by username_2 on 2022-04-30. Score: 0
  
  This worked for me.
  Create a new div
  CSS
  div.Heading-Block {
    display: block;
    break-inside: avoid;
  }
  
  HTML
  
        Your subheader
        Your paragraph
  
  
  ---
  
  