打印HTML时避免强制分页

Question

我正在尝试打印带有大量大块引用元素的HTML，每个元素跨越半页或更多。在打印时，当引用元素无法在当前页面内完成时，浏览器会添加分页符。

我已经在几个浏览器上尝试了同样的事情，结果都一样。如何编写CSS以显示引用元素，即使它们将在当前页面末尾被切断？

例如：

text-text text-text text-text text-text 
text-text text-text text-text text-text 
<blockquote>
text-text text-text text-text 
text-text text-text text-text 
</blockquote>

浏览器会在当前页面结束前添加分页符，以避免“blockquote”元素的内容无法完成。

如何防止这种情况发生？

我已经尝试使用CSS属性page-break-before/inside/after进行调整，但没有帮助。

- michael

---

我认为你在谈论默认的浏览器样式，可以使用 CSS 覆盖它们。 - reinierkors

@reinierkors 是哪个属性？这是我的问题。我已经尝试了page-break-before/inside/after，但没有成功。 - michael

Answer 1

我相信您需要其中一种或两种 page-break 规则：

blockquote {
  display: block;

  page-break-before: avoid;
  page-break-inside: auto;
}

...或者前面的元素可能需要使用page-break-after: avoid。

（您还可以使用最近引入的属性break-before、break-after和break-inside——但截至2023年，这些属性的浏览器支持尚不完整。）

根据下面的评论，元素必须具有display: block才能正常工作；display: inline-block不会触发分页行为。

- Daniel Beck

---

好的。我承认我从未需要过这个属性，所以我不知道是否有需要注意的怪异之处；页面断点通常由“page-break-foo”属性控制，因此它将是其中之一。 - Daniel Beck

折腾了一会儿，我找到了答案。似乎是<blockquote style="display:inline-block">阻止了这个。我改成了display:block，你的解决方案就起作用了。请编辑你的答案，这样我就可以点赞并接受了。 - michael

@m.r. 这很有趣！而且相当令人惊讶！老实说，我不知道为什么会这样 - 即使我的答案只对了一半，我很高兴能给你一个正确方向的提示... - Daniel Beck

display:block触发该行为。display:inline-block则不会。 - michael