0

Let's say each message will take 3/4 of print page. How to avoid splitting second message into two pages? I want keep messages on one page if it's possible. If message is going to break, it should start on new page.

<div class="paperSheet">
   <div class="paperSheet__message">
      <p> Title </p>
      <p> Text </p>
   </div>
   <div class="paperSheet__message">
      <p> Title </p>
      <p> Text </p>
   </div>
</div>

So far I set only paperSheet to be visible when printing.

@media print {
    body * {
        visibility: hidden;
    }
    #paperSheet, #paperSheet * {
        visibility: visible;
    }
    #paperSheet{
        position: absolute;
        left: 0;
        top: 0;
        border: none;
        box-shadow: none;
        width: 100%;
    }
}
lemon
  • 127
  • 1
  • 2
  • 15
  • Does this answer your question? [Can I force a page break in HTML printing?](https://stackoverflow.com/questions/1664049/can-i-force-a-page-break-in-html-printing) – DaFois Nov 14 '19 at 14:50
  • Turns out that display: flex on paperSheet (i had this by default) blocked page-break-after: always. Thanks anyway, solved! – lemon Nov 14 '19 at 14:55

1 Answers1

0

Try the page-break-after property. This should force a page break after each element. For example:

#paperSheet{
    position: absolute;
    left: 0;
    top: 0;
    border: none;
    box-shadow: none;
    width: 100%;
    page-break-after:always;
}
Floppy52
  • 184
  • 9