html - 未定义的 div 上的 CSS "page-break-after"

Question

我有一个搜索引擎可以生成各种小部件(每个小部件都在自己的 div 中)，每次都有不同数量的小部件。

当我们打印结果页面时，小部件可以在中间被分页符切断，我希望每个小部件都在页面内而不被分页符切断。

我们尝试过:

@media print {
    .widget {page-break-after: always;}
}

它切断了所有的小部件，每个小部件用于不同的页面，这不是我们想要的。我们希望分页仅在必要时发生。 显然，我们不想为特定的小部件进行分页，因为我们不知道必须剪切哪个小部件。

我们也试过:

@media print {
    .widget {page-break-after: avoid;}
}

而且它也没有用。 有什么建议吗？

Answer 1

从它的声音你想使用:

.widget {
    page-break-inside: avoid;
}

这会将跨越页面的任何小部件向下推送到下一个。