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](https://ebooks.stackexchange.com/questions/1235/keeping-lines-together-in-epub) 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>
  
  ```
  
  **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
  
  ```
  <div class="Heading-Block">
        <p class="Heading-2">Your subheader</p>
        <p class="BodyText">Your paragraph</p>
  </div>
  
  ```
  
  
  ---
  
  