CSS打印:避免在页面之间减半div ?

我正在为一个软件编写一个插件，它可以收集大量的项目，并将它们弹出到Cocoa WebView中的HTML中(它使用WebKit作为它的渲染器，所以基本上你可以假设这个HTML文件是在Safari中打开的)。

它生成的div具有动态高度，但变化不大。它们通常在200px左右。不管怎样，每个文档大约有600个这样的项目，我很难把它打印出来。除非我很幸运，否则每页的底部和顶部都有一个条目被切成两半，这使得实际使用打印输出非常困难。

我尝试过前破页、后破页、内破页，三种方法的组合都没有用。我认为可能是WebKit没有正确地呈现指令，或者可能是我对如何使用它们缺乏理解。无论如何，我需要帮助。如何防止打印时DIVs减半?

180099 次浏览
小开
最佳答案

使用break-inside应该工作:

@media print {
div {
break-inside: avoid;
}
}

它适用于所有主要浏览器:

  • Chrome 50 +
  • 边12 +
  • 火狐65 +
  • 歌剧37 +
  • Safari 10 +

使用page-break-inside: avoid;代替也可以工作，但已经被break-inside: avoid 完全弃用。

小开

分页结束后可能的值为:auto, always, avoid, left, right

我认为你不能在绝对定位的元素上使用page-break-after属性。

小开

我也有同样的问题，但还没有解决办法。page-break-inside不能在浏览器上运行，只能在Opera上运行。另一种方法可能是在div的所有子元素上使用page-break-after:避免;来保持在一起…但在我的测试中，回避属性不起作用。在Firefox中…

在所有流行的浏览器中工作的是强制换页，使用例如。page-break-after:总是

小开

只有一个部分的解决方案:我能让它在IE中工作的唯一方法是将每个div包装在它自己的表中，并在表中设置分页内以避免。

小开

page-break-inside:避免;在webkit中绝对不能工作，事实上，5年多来，这已经是一个已知的问题https://bugs.webkit.org/show_bug.cgi?id=5097

就我的研究而言，还没有已知的方法来实现这一点(我正在研究自己的破解方法)

我可以给你的建议是，要在FF中实现这个功能，用overflow: auto(注意不要因为容器大小太小而导致奇怪的滚动条显示)来包装您不想在DIV(或任何容器)中中断的内容。

遗憾的是，FF是我唯一能做到这一点的浏览器，而webkit是我更担心的一个。

小开

在我的案例中，我通过设置我所选择的div为page-break-inside:avoid，并将所有元素设置为display:inline来解决webkit中的分页困难。就像这样:

@media print{
* {
display:inline;
}
script, style {
display:none;
}
div {
page-break-inside:avoid;
}


}

似乎page-break-properties只能应用于内联元素(在webkit中)。我试着只对我需要的特定元素应用display:inline，但这不起作用。唯一有效的方法是将内联应用于所有元素。我猜是一个大容器div'把事情搞砸了。

也许有人可以对此进行详细解释。

小开

page-break-inside: avoid;给我麻烦使用wkhtmltopdf。

为了避免在文本中中断，在包含文本的div的CSS中添加display: table;。

我希望这对你也有用。谢谢你约翰。

编辑:建议将此添加到media块中，以不破坏现有样式。即

@media print {
div.my-div {
display: table
}
}
小开

我遇到的一个陷阱是父元素将“overflow”属性设置为“auto”。这将在打印版本中否定带有page-break-inside属性的子div元素。否则，page-break-inside: avoid工作在Chrome为我很好。

小开 
@media print{
/* use your css selector */
div{
page-break-inside: avoid;
}
}

这个解决方案适用于所有新浏览器。看到搜索= page-break-inside caniuse.com/ #

小开

page-break-inside: avoid;似乎不能总是工作。它似乎考虑到了容器元素的高度和位置。

例如，比页面高的inline-block元素将被剪切。

我能够通过用display: inline-block标识容器元素并添加以下内容来恢复工作的page-break-inside: avoid;功能:

@media print {
.container { display: block; } /* this is key */


div, p, ..etc { page-break-inside: avoid; }
}

希望这能帮助那些抱怨“页面突破不工作”的人。

小开

我也不得不处理wkhtmltopdf。

我使用Bootstrap 3.3.7作为框架，需要避免在.row元素上分页。

我使用这些设置完成了工作:

.myContainer {
display: grid;
page-break-inside: avoid;
}

不需要用@media print来包装

小开

我在使用Bootstrap时遇到了这个问题，我在每一行中都有多列。

我试图给page-break-inside: avoid;或break-inside: avoid;给col-md-6 div元素。这是行不通的。

我从上面辩经给出的答案中得到了一个提示，浮动元素不能很好地与page-break-inside: avoid;一起工作。

相反，我必须将page-break-inside: avoid;或break-inside: avoid;赋给<div class="row">元素。并且我在打印页面中有多个行。

也就是说，每个行中只有2列。而且它们总是水平贴合，不会缠绕在新的线条上。

在另一个例子中，如果你想要每行有4列，那么使用col-md-3。


提交答案