Page-break-inside:避免不工作

Question

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

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

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

相关文章:

• 打印样式:如何确保图像不会跨越分页符

• 什么是最有用的媒体="打印"specfic,跨浏览器兼容的CSS属性？

• 使用CSS以避免分页符的正确方法是什么？

• page-break-inside在Chrome中不起作用？
• 解决页面突破问题:避免

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; 
}

检查这个小提琴

将其添加到您的印刷媒体中

我刚刚在 Chrome 中查看了这个，它看起来很好，减去也需要这个的图像：

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

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

 <!--nextpage-->