title: Text cut at page break when print
body: <p>My text inside a div is cut at page break when trying to print in Chrome. I've tried all kinds of page-break-xxx, as well as <code>orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid;</code>. I've also tried to set the div to display as table, block, inline, inline-block... but nothing works. I've spent a lot of time googling... I believe this must be answered somewhere... Could anyone point me to a direction as how or where to find the solution? Thanks in advance!
  <a href="https://i.stack.imgur.com/Sv2OT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Sv2OT.png" alt="enter image description here"></a></p>
  
  <pre><code>  &lt;div role="tabpanel" class="tab-pane" id="tab_1"&gt;
      {{ product.metafields.a }}
    &lt;/div&gt;
  
    &lt;div role="tabpanel" class="tab-pane" id="tab_2"&gt;
      {{ product.metafields.b }}
    &lt;/div&gt;
  
    &lt;div role="tabpanel" class="tab-pane" id="tab_3"&gt;
      {{ product.metafields.c }}
    &lt;/div&gt;
  </code></pre>
  
  <p>The code looks like above. They are actually tabs, and I force them to all show up on print. I've tried all kinds of <code>page-break-xxx</code> on <code>.tab-pane</code>.</p>
  
  <p>{{ product.metafields.x }} are basically texts like H2, P tags.</p>