CSS page-break properties

Question

I am trying to use CSS page-break properties to avoid a page break after the title span. The html is as follows:

<div  class="cnx-eoc free-response">
  <div class="title">
    <span>Review Questions</span>
  </div>
</div>

The CSS rules I declared are below:

div.cnx-eoc.free-response > div.title { 
  page-break-inside: avoid; 
  page-break-after: avoid;
}

This solution should work, however I do not get the expected results. Any suggestions?

Answer 1

If I am not wrong, you are trying to use it on span . However, page-break-after CSS property applies to block-level elements. Reference: page-break-after .