html - 如何将 div 与 child 保持在同一打印页面上？

Question

假设每条消息将占用打印页面的 3/4。如何避免将第二条消息分成两页？如果可能的话，我希望将消息保留在一页上。如果消息要中断，它应该从新页面开始。

<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>

到目前为止，我只设置了 paperSheet 在打印时可见。

@media print {
    body * {
        visibility: hidden;
    }
    #paperSheet, #paperSheet * {
        visibility: visible;
    }
    #paperSheet{
        position: absolute;
        left: 0;
        top: 0;
        border: none;
        box-shadow: none;
        width: 100%;
    }
}

Answer 1

试试 page-break-after 属性。这应该在每个元素之后强制分页。例如:

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