未定义 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;
}

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