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

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

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

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

当前回答

page-break-inside:避免;似乎并不总是有效。它似乎考虑到了容器元素的高度和位置。

例如，比页面高的内联块元素将被剪切。

我能够恢复工作页面打破内部:避免;通过使用display: inline-block标识容器元素并添加:

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

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

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

其他回答

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

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

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

page-break-inside:避免;似乎并不总是有效。它似乎考虑到了容器元素的高度和位置。

例如，比页面高的内联块元素将被剪切。

我能够恢复工作页面打破内部:避免;通过使用display: inline-block标识容器元素并添加:

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

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

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

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

为避免文本中出现断行，添加display: table;到包含文本的div的CSS。

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

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

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

我也不得不处理wkhtmltopdf。

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

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

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

不需要用@media print来包装

推荐文章