小编典典

CSS Printing: 避免页面之间的 DIV 被切成两半?

all

我正在为一个软件编写一个插件,它需要大量项目并将它们弹出到 Cocoa 中的 WebView 中的 HTML 中(它使用 WebKit 作为其渲染器,所以基本上你可以假设这个 HTML 文件正在打开苹果浏览器)。

它制作的 DIV 具有动态高度,但变化不大。它们通常在 200 像素左右。无论如何,每个文档大约有六百个这样的项目,我很难将它打印出来。除非我很幸运,否则每页的底部和顶部都有一个被切成两半的条目,这使得实际使用打印输出变得非常困难。

我已经尝试过 page-break-before、page-break-after、page-break-inside 以及这三者的组合,但均无济于事。我认为可能是 WebKit 没有正确呈现指令,或者可能是我对如何使用它们缺乏了解。无论如何,我需要帮助。打印时如何防止将 DIV 切成两半?


阅读 85

收藏
2022-05-26

共1个答案

小编典典

使用break-inside应该可以:

@media print {
  div {
    break-inside: avoid;
  }
}

It works on all major browsers:

  • Chrome 50+
  • Edge 12+
  • Firefox 65+
  • Opera 37+
  • Safari 10+

使用page-break-inside: avoid;instead 也应该有效,但已被break-inside: avoid.

2022-05-26