我们如何防止在不同页面上打印块

Question

在我的网站上，我希望在divA之后立即打印divB。但是如果divB的内容暗示divB打印在两个页面上，我想在之前插入分页符，以便divB不会打印在两个页面上而只打印一个页面。

我怎么能用css理想地做到这一点，否则javascript？

非常感谢！

编辑：

在下文中，divB很大，因此它将在两页上分解。 然后我想在divB之前插入分页符，以便在不同的页面上打印。

BUT 如果divA和divB足够小以保持同一页面，我不想要分页。

Answer 1

没有好的通用解决方案。正如一些人所指出的那样，你可以在＆lt; div＆gt;之前放一个分页符。 “B”......但是你会永远得到它。即使“A”和“B”都适合一页。

你可以在＆lt; div＆gt;上使用page-break-inside =“avoid” “B”。这可能更接近你想要的。如果“B”不适合带有“A”的页面，“B”将全部移动到下一页。

但......有副作用，因为有第三种可能性。如果“B”的内容如此之大以至于它本身不适合页面怎么办？会发生什么，它会做你想的，将“B”移动到下一页并尝试使用“B”构建该页面。它将无法满足“B”避免内部分页的条件，因此它将破坏该条件。不幸的是，它不会在页面结束之前弄明白，所以最终会得到一个空白页面。

如果您知道“B”将始终适合一页，那么您可以使用page-break-inside =“avoid”，这样就可以了。但如果没有，那么没有什么能对你有用。

对类似问题的解释略长一点：

HTML/CSS: empty page + only header page when printing table

所以你真正想要的是三件事在一起......（1）你希望它避免在内部的分页符，只要它不长于页面，否则，（ 2）除非适合当前页面，否则您希望在（3）之前进行分页。不幸的是，这不存在。你只能用Javascript做到这一点。您可以为div设置页面的宽度，然后获得div“A”和div“B”的高度，然后决定在打印过程中动态插入这些CSS属性。

Answer 2

您可能希望使用一些带有cm或pt单位的打印样式表作为元素，这样您就可以调整打印在纸上的物理尺寸。 我建议你看一下这篇文章： How To Set Up A Print Style Sheet

Answer 3

假设你有#divB，你可以使用这个CSS。如果DIV没有id，并且有一个类，那么你应该将选择器部分（@media print { #divB { page-break-before: always;} } ）更改为可以定位该元素的任何内容。

NSAllowsArbitraryLoads