分頁符不能在圖像標籤上工作

Question

我在PDF的內部從WebView中打印html，我想在每張圖像之後使用分頁符。所以我做了以下：

img { 
    page-break-before: always; 
    page-break-inside: avoid; 
} 

但它對我的圖像沒有影響。 我試圖使用相同的div的：

div { 
    page-break-before: always; 
    page-break-inside: avoid; 
} 

它完美地工作。

爲什麼不在圖像上工作？

Answer 1

此屬性應用於阻止產生框元件。它不適用於不會生成框的空的<div>。

- From MDN約分頁

你需要讓你的圖像的塊級元素，例如與display: block;。

請參閱page-break-before,page-break-after或page-break-inside

Answer 2

我無法在文檔中找到它，但我相信分頁符只適用於塊級元素。因此，將其應用於圖像或容器。

img { 
    display: block; 
    page-break-before: always; 
    page-break-inside: avoid; 
}