css 打印预览页面被剪切

Question

正如您在此 Image 中看到的，当第一个 table 有更多记录时，下一个 table 的标题被剪切，有时 table分页符之前很长，有时很短。

如何在底部进行动态边距调整？为了避免那些不必要的中断？

    @page {
      margin-top: 13mm;
      margin-left: 1px;
      margin-right: 1px;
      size: short;
    }
    @media print {
      html, body {
        width: 250mm;
        height: 297mm;
      }
      /* ... the rest of the rules ... */
    }

Answer 1

根据你的图片，我想你可以尝试page-break-before或page-break-after

@media print {
    h1 {
        page-break-before: auto | always | avoid | left | right | inherit;
        page-break-after:  auto | always | avoid | left | right | inherit;
    }
}

还有两篇文章可能会解释这两个 CSS 属性，click here and click here

如果您可以在 fiddler 上提供一些代码或示例，那么其他人可以帮助您

css 打印预览页面被剪切

css print preview page is cut

javascript

css

jquery

print-preview