Text cut at page break when print

Question

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 orphans: 5; widows: 5; page-break-after: avoid; page-break-before: avoid;. 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!

  <div role="tabpanel" class="tab-pane" id="tab_1">
    {{ product.metafields.a }}
  </div>

  <div role="tabpanel" class="tab-pane" id="tab_2">
    {{ product.metafields.b }}
  </div>

  <div role="tabpanel" class="tab-pane" id="tab_3">
    {{ product.metafields.c }}
  </div>

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 page-break-xxx on .tab-pane.

{{ product.metafields.x }} are basically texts like H2, P tags.

Answer 1

Try adding class to your elements,

for instance.

<div class="no-break">
</div>

then on your print.css

add this

.no-break{ page-break-before: always; }

This will allow your page from being uncut.

Answer 2

I don't know why it didn't work at first... probably used on the wrong element. but just tried again and this fixes the problem CSS Printing: Avoiding cut-in-half DIVs between pages?