我們如何防止在不同頁面上打印塊

Question

我希望在divA之后立即打印divB。 但是，如果divB的內容暗示divB打印在兩頁上，我想插入一個分頁符，這樣divB不會打印在兩頁上，而只會打印一頁。

理想情況下，如何使用CSS做到這一點？

非常感謝 ！

編輯：

在下面的內容中，divB很大，因此它將分為兩頁。 然后，我想在divB之前插入一個分頁符，以便將其打印在其他頁面上。

但是，如果divA和divB足夠小，可以停留在同一頁面上，則我不希望分頁。

Answer 1

沒有好的通用解決方案。 正如某些人指出的那樣，您可以在<div>“ B”之前放置一個分頁符...但是您總會在這里得到它。 即使“ A”和“ B”都適合一頁。

您可以在<div>“ B”上使用page-break-inside =“ avoid”。 這可能更接近您想要的。 如果“ B”不適合帶有“ A”的頁面，則“ B”將全部移至下一頁。

但是...有副作用，因為還有第三種可能性。 如果“ B”的內容太大而無法容納在頁面上怎么辦？ 將會發生的事情是，它將按照您的想法進行操作，將“ B”移到下一頁並嘗試使用“ B”構建該頁。 它將不能滿足“ B”避免內部分頁的條件，因此它將破壞該條件。 不幸的是，它直到頁面末尾都無法弄清楚，因此您將得到一個空白頁面。

如果您知道“ B”將始終適合在一頁上，則可以使用page-break-inside =“ avoid”，這樣就可以了。 但是，如果沒有，則對您沒有任何幫助。

這里是一個類似問題的冗長解釋：

HTML / CSS：打印表時為空頁+僅標題頁

因此，您真正想要的是將三件事合而為一...（1） 只要不超過一頁 ，您就希望避免在其中分頁 ；否則，（2）您要在（3）前分頁），除非它適合當前頁面。 不幸的是，這不存在。 您只能使用Javascript做到這一點。 您可以為div設置頁面的寬度，然后獲取div“ A”和div“ B”的高度，然后決定在打印過程中動態插入這些CSS屬性。

Answer 2

您可能要使用一些以cm或pt單位的打印樣式表，以便可以調整打印在紙上的物理尺寸。 我建議您看看這篇文章： 如何設置打印樣式表

Answer 3

假設您有<div id="divB">...</div> ，則可以使用此CSS。 如果DIV沒有ID，而是有一個類，則應將選擇器部分（ #divB ）更改為可以針對該元素的任何內容。

@media print {
  #divB { page-break-before: always;}
}