html - 内部分页：避免不工作

Question

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

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

跨页换行

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

score 19 · Accepted Answer

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

display: flex

然后内部破解不起作用。

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

display: block

然后它将起作用。

score 10 · Accepted Answer

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

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

简而言之，样式@media print应该避免使用float, flex, grid，如果你需要使用. 为了获得与不同浏览器的最佳兼容性，请尝试定义从根到父的整个树，以及不应该中断的元素。position:absoluteposition:stickypage-break-inside: avoiddisplay:blockdisplay:inline-blockpage-break-inside: avoid

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

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

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

score 1 · Accepted Answer

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

position: relative;

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

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

score 0 · Accepted Answer

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

例如：

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

score 0 · Accepted Answer

尝试这个：

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

score 0 · Accepted Answer

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

这会起作用

html - 内部分页：避免不工作

6 回答 6

Related

Reference