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

在我的網站上，我希望divB在divA之後打印。但是，如果divB的內容暗示divB打印在兩頁上，我想先插入分頁符，以便divB不打印在兩頁上，而只打印一頁。我們如何防止塊被打印在不同的頁面上

我該如何做到這一點與理想的CSS，否則JavaScript？

非常感謝！

編輯：

在下面，DIVB是大的，因此將在兩頁被breaked。然後我想在divB之前插入一個分頁符，以便在不同的頁面上打印。

但是如果divA和divB足夠小，可以保持在同一頁面上，我不想要分頁符。

來源

2015-09-04 Sébastien

好吧，我唯一知道的是如何在divB之前添加分頁符。至少它不會在兩頁上打破它。但是如果divA的內容允許兩個div保持在同一頁面上，那會更好！ –

「1頁」和「2頁」是什麼意思？ – Rooster

@Rooster我相信OP正在討論在紙上打印網頁的分頁。 Sebastien如果您提供了您正在使用的代碼的示例或您嘗試實現的視覺圖像，它將會很有幫助。 – crazymatt

沒有很好的通用解決方案。正如一些人指出的那樣，你可以在<div>「B」之前放一個分頁符......但是在那裏你總能得到它。即使「A」和「B」都適合在一頁上。

您可以在<div>「B」處使用page-break-inside =「avoid」。這可能更接近你想要的。如果「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屬性作爲打印過程的一部分動態插入。

來源

2015-09-04 22:42:40

很好，這是我的問題的答案，謝謝。我會嘗試用JavaScript來動態地插入它。 –

您可能想要使用一些打印樣式表與cm或pt單位爲你的元素，所以你可以調整它們的物理尺寸打印在紙上。我建議你看看這個帖子： How To Set Up A Print Style Sheet

來源

2015-09-04 21:35:57

假設你有<div id="divB">...</div>，你可以使用這個CSS。如果DIV沒有ID，並且有類，則應該將選擇器部分（#divB）更改爲可以定位該元素的任何部分。

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

來源

2015-09-04 21:39:39

不是我的問題的答案。我想有條件地設置分頁符。我不希望有任何分頁符，如果2 div小到可以完全打印在同一頁上 –

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

回答

相關問題