Question

我的（Wordpress）网站有一个打印样式表，我想要在单个页面上打印图像，而不是在页面上拆分。在某些情况下，甚至文本行都在页面之间分割。我在我的打印样式表中包含img {page-break: avoid;)，但没有运气。我之前找到了一些答案，但它们有点老了。

是否有可靠的方法在单个页面上打印中等大小的图像而不是在页面上拆分？为什么文本行跨页？

lines breaking across pages

网站：http://74.220.217.211/housing-developments/grafton-townhomes/

相关帖子：

Answer 1

img元素的父元素可能具有样式：

display: flex

然后闯入是行不通的。

例如，如果您将父元素的显示样式更改为：

display: block

然后它将起作用。

Answer 2

不同的浏览器对 page-break-inside: avoid 有奇怪的限制。在不同的文章中提出了以下限制：

如果文档树的父级或祖父级带有 display:flex 或 display:grid，则避免分页符将不起作用。
如果父元素有 display:inline-block，则 avoid 不起作用。
在某些情况下，父元素需要 position:relative 才能在子元素中使用值 avoid。（具体规则未知。）
在某些情况下，父元素和需要避免中断的元素都需要 position:relative 才能使值 avoid 起作用。（具体规则未知。）
父元素不得有 display: inline-block。
元素不得有 display:table-cell。

简而言之，@media print 样式应该避免使用 float、flex、grid、position:absolute 和 position:sticky，如果您需要使用page-break-inside: avoid。为了与不同浏览器的最佳兼容性，请尝试使用 display:block 以及不应与 display:inline-block 和 page-break-inside: avoid 中断的元素定义从根到父级的整个树。

上述例外都不属于任何规范的一部分，因此这些只是浏览器实现中的错误或限制。

另请注意，即使最新的规范更喜欢 break-inside: avoid 而不是 page-break-inside: avoid，但现实世界的浏览器支持仍然很糟糕。我建议同时声明：

.nobreak
{
  page-break-inside: avoid;
  break-inside: avoid
}

Answer 3

试试这个：

.site-container, .site-inner (heck body tag possibly) {position:relative;}

p {
    page-break-inside: avoid;
    position: relative; 
}

选中此FIDDLE

在打印介质中添加

我只是在Chrome中查看此内容，它看起来很好，减去了还需要此图片的图片：

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

最后Wordpress有这个，但实际上不确定它是否有帮助......

 <!--nextpage-->

Answer 4

我认为问题可能来自元素的position属性。您不希望在页面末端断开的元素及其父元素应声明为：

position: relative;

其余的代码样式是正确的，应该看起来像

@media print {
    img {
        page-break-before: auto;
        page-break-after: auto; 
        page-break-inside: avoid;
        position: relative;
    }
}

Answer 5

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

这将起作用

Answer 6

使用 @media print 并为页面正文元素设置合适的高度，或为小尺寸设置图片

例如：

@media print{
body{
height: 800px;
}
}

Page-break-inside：避免不工作

6 个答案: