关于html：Page-break-inside：避免不起作用


Page-break-inside:avoid not working

我的(WordPress)网站有一个打印样式表，我希望图像打印在单个页面上，而不是分成几页。在某些情况下，甚至几行文本也会在页面之间分开。我在打印样式表中添加了img {page-break: avoid;)，但是没有运气。我已经找到了一些先前的答案，但它们有些旧。

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

picture broken across two pages

lines breaking across pages

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

相关文章：

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

  • 跨浏览器兼容的CSS属性最有用的media =" print"是什么？

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

  • page-break-inside在Chrome中不起作用？
  • 解决page-break-inside：避免
相关讨论

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

1
display: flex

然后闯入是行不通的。

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

1
display: block

然后它将起作用。

相关讨论

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

例如：

1
2
3
4
5
@media print{
body{
height: 800px;
}
}
1
2
3
4
5
6
img {
    page-break-before: auto;
    page-break-after: auto;
    page-break-inside: avoid;
    display: block;
}

这会工作

相关讨论

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

1
position: relative;

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

1
2
3
4
5
6
7
8
@media print {
    img {
        page-break-before: auto;
        page-break-after: auto;
        page-break-inside: avoid;
        position: relative;
    }
}

试试这个：

1
2
3
4
5
6
.site-container, .site-inner (heck body tag possibly) {position:relative;}

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

检查此FIDDLE

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

我只是在Chrome浏览器中对此进行了审核，看起来不错，但减去了图片(也需要此图片)：

1
2
3
4
5
6
img {
    page-break-before: auto;
    page-break-after: auto;
    page-break-inside: avoid;
    display: block;
}

最后，WordPress拥有此功能，但实际上不确定是否有帮助...

[cc lang="css"]

1 2 下一页