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.

Possible duplicate of [CSS Printing: Avoiding cut-in-half DIVs between pages?](http://stackoverflow.com/questions/907680/css-printing-avoiding-cut-in-half-divs-between-pages) — DimSum, May 02 '16 at 15:03

score 2 · Answer 1 · answered Apr 30 '16 at 07:37

2

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.

answered Apr 30 '16 at 07:37

Garry Gonzales

51
2

thanks for your tip. I tried adding `page-break-before: always` on `.tab-pane` (which is the wrapper around the text), and the text elements inside, but neither is a success. – DimSum May 02 '16 at 14:36

score 2 · Accepted Answer · edited May 23 '17 at 11:52

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?

edited May 23 '17 at 11:52

Community

1
1

answered May 02 '16 at 14:52

DimSum

352
2
4
17

Text cut at page break when print

2 Answers2