内部分页：避免不工作

Posted 2023-03-05

【中文标题】内部分页：避免不工作

【英文标题】：Page-break-inside:avoid not working

【发布时间】：2016-04-04 16:56:26

【问题描述】：

我的 (Wordpress) 网站有一个打印样式表，我希望将图像打印在一个页面上，而不是跨页面打印。在某些情况下，甚至文本行也被拆分到页面中。我在我的打印样式表中包含了img page-break: avoid;)，但没有运气。我找到了一些以前的答案，但它们有点老了。

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

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

相关帖子：

Print styles: How to ensure image doesn't span a page break

What are most useful media="print" specfic ,cross browser compatible css properties?

What is the correct way to do the CSS to avoid page breaks?

page-break-inside doesn't work in Chrome? Work around for page-break-inside:avoid

【问题讨论】：

尝试将position: relative 添加到父节点

@riskbreaker，谢谢！我不确定要添加到哪个父母。

你用的是什么浏览器？

【参考方案1】：

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

display: flex

那么break-inside就不起作用了。

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

display: block

然后就可以了。

【讨论】：

哦！多么奇特的陷阱！如果您有参考链接，将会很有帮助。

从来没有想过这个！！另请检查此线程以获取显示的替代解决方案：flex ***.com/questions/20408033/… 谢谢

仅供参考 - display:flex 可能会导致问题，但不能保证一定会出现问题。此外，display:grid 也可能导致问题

【参考方案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 定义从根到父的整个树，并且除了page-break-inside: avoid 之外，不应使用display:inline-block 破坏的元素。

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

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

.nobreak

  page-break-inside: avoid;
  break-inside: avoid

【讨论】：

另见：smashingmagazine.com/2019/02/css-fragmentation

另见：我的 hack 将标题与以下内容保持在同一页面上 ***.com/a/68268825/334451

【参考方案3】：

我认为问题可能来自元素的position 属性。您不想在页尾中断的元素及其父元素应声明为：

position: relative;

其余的代码样式是对的，应该是这样的

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

【参考方案4】：

试试这个：

.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-->

【讨论】：

试过了，但没有运气。谢谢。

你把它放在你的 WP 文件的什么地方？

可能想要检查该主题 - 如果您在印刷媒体上至少添加了 img 标记但仍然没有得到任何结果，那么可能需要更多的主题来实现

【参考方案5】：

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

这会起作用

【讨论】：

欢迎来到 Stack Overflow。当用其他三个答案回答一个四年前的问题时，指出您的答案所针对的问题的新方面并确认时间的流逝是否使新答案成为可能是有用的。在这种情况下，您的答案与现有答案非常相似，但只是代码，缺乏解释，并且没有其他答案所具有的细节，例如使用 @media print

【参考方案6】：

使用 @media print 并为 page body 元素设置合适的 height 或将 small size 设置为图片

例如：

@media print
body
height: 800px;