我的 (Wordpress) 网站有一个打印样式表，我希望将图像打印在一个页面上，而不是跨页面打印。在某些情况下，甚至文本行也被拆分到页面中。我在我的打印样式表中包含了img {page-break: avoid;)，但没有运气。我找到了一些以前的答案，但它们有点老了。
是否有可靠的方法在单页上打印中等大小的图像，而不是将其拆分为多个页面？为什么文本行会跨页？
网站：http://74.220.217.211/housing-developments/grafton-townhomes/
相关帖子：
【问题讨论】：
position: relative 添加到父节点
标签： html css wordpress printing page-break-inside
可能是img元素的父元素有样式：
display: flex
那么break-inside就不起作用了。
例如，如果您将父元素显示样式更改为：
display: block
然后就可以了。
【讨论】：
display:flex 可能会导致问题，但不能保证一定会出现问题。此外，display:grid 也可能导致问题
不同的浏览器对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
}
【讨论】：
我认为问题可能来自元素的position 属性。您不想在页尾中断的元素及其父元素应声明为：
position: relative;
其余的代码样式是对的，应该是这样的
@media print {
img {
page-break-before: auto;
page-break-after: auto;
page-break-inside: avoid;
position: relative;
}
}
【讨论】：
试试这个：
.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-->
【讨论】：
img 标记但仍然没有得到任何结果，那么可能需要更多的主题来实现
img {
page-break-before: auto;
page-break-after: auto;
page-break-inside: avoid;
display: block;
}
这会起作用
【讨论】：
@media print {
使用 @media print 并为 page body 元素设置合适的 height 或将 small size 设置为图片
例如：
@media print{
body{
height: 800px;
}
}
【讨论】：