CSS打印：避免頁面之間的半切DIV？

138

我正在編寫一個軟件的插件，它需要大量項目集合並將它們彈出到Cocoa WebView中的HTML中（它使用WebKit作爲它的渲染器，所以基本上可以假設這個HTML文件正在在Safari中打開）。CSS打印：避免頁面之間的半切DIV？

它製作的DIV具有動態高度，但它們變化不大。他們通常在200px左右。無論如何，每個文檔中大約有六百個這樣的項目，我要花很長時間才能打印出來。除非我運氣好，否則每頁的底部和頂部都會有一個入口被切碎，這使得實際使用打印輸出非常困難。

我已經嘗試過頁面中斷，頁面中斷，頁面中斷，以及三者的組合，但無濟於事。我認爲這可能是WebKit不能正確呈現說明，也可能是我對如何使用它們缺乏理解。無論如何，我需要幫助。打印時如何防止我的DIV的一半？

來源

2009-05-25 joeylange

提供有關您遇到的問題的示例文檔，也許我們可以提供幫助！ – 2009-05-25 18:49:40

我回答了一個非常類似的問題，關於避免在這裏一半div divs：http://stackoverflow.com/a/14348953/1026459 – 2013-01-15 23:38:25

228

這應該工作：

@media print 
{ 
    div{ 
     page-break-inside: avoid; 
    } 
}

請注意current browser support (12-03-2014)：

鉻 - 1.0+
火狐（壁虎） - 19.0+
的Internet Explorer - 8.0+
Opera - 7.0+
Safari - 1 .3+（312）

來源

2009-05-25 18:52:46

它**應**工作。但事實並非如此。瀏覽器支持請參見http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules。 – Greg 2012-06-26 09:24:27

在Safari 6中工作:)現在正在開發者預覽中_ – 2012-07-21 17:14:11

的分頁，之後可能的值是：auto, always, avoid, left, right

我相信你無法使用thie分頁-後絕對定位的元素屬性。

來源

2009-05-25 18:55:04 DOK

我有同樣的問題bu bu解決方案呢。 page-break-inside不適用於瀏覽器，但Opera。另一種可能是使用page-break-after：avoid; div的所有子元素都要保持一致...但在我的測試中，avoid-Attribute不起作用，例如。在Firefox ...

什麼適用於所有ppular瀏覽器是強制分頁使用例如。 分頁-後：總是

來源

2010-01-27 10:45:27 Bjoern

只能解決部分問題：我能得到這個對IE瀏覽器的唯一辦法是包裝每個格在它自己的表，並設置了分頁，裏面有關於表避免。

來源

2010-09-01 19:48:38 NotMe

page-break-inside：avoid;絕對不能在webkit中工作，實際上已經是一個已知的問題5年多了現在https://bugs.webkit.org/show_bug.cgi?id=5097

就我的研究已經沒有已知的方法來實現這一點（我正在努力找出我自己的黑客）

我可以給你的建議是，在FF中完成這個功能，包裝你不想做的內容;不想在帶有溢出的DIV（或任何容器）內破壞：auto（注意不要導致奇怪的滾動條顯示通過調整容器太小）。

不幸的是，FF是我設法完成的唯一瀏覽器，webkit是我更擔心的一個。

來源

2011-06-01 21:15:33

在我的情況下，我設法通過將我選擇的div設置爲page-break-inside：來避免並設置所有顯示內容：inline，從而解決了webkit中的分頁符難題。所以像這樣：

@media print{ 
* { 
    display:inline; 
} 
script, style { 
    display:none; 
} 
div { 
    page-break-inside:avoid; 
} 

}

看起來像page-break-properties只能應用於內嵌元素（在webkit中）。我試圖只應用display：內聯到我需要的特定元素，但這不起作用。唯一有效的工作是內聯應用於所有元素。我想這是大型集裝箱公司的事情之一。

也許有人可以在此擴大。

來源

2015-03-20 15:57:41

page-break-inside: avoid;給了我使用wkhtmltopdf的麻煩。

爲避免文本中斷，請將display: table;添加到包含文本的div的CSS中。

我希望這也適用於你。謝謝JohnS。

來源

2015-04-21 13:08:01 Bonjowi

我遇到的一個陷阱是一個父元素'overflow'屬性設置爲'auto'。這會在打印版本中使用page-break-inside屬性取消子div元素。否則，page-break-inside: avoid適合我在Chrome上正常工作。

來源

2015-05-19 16:50:48

CSS打印：避免頁面之間的半切DIV？

回答

相關問題