CSS打印:避免在页面之间切成两半?-CSSPrinting:Avoidingcut-in-halfDIVsbetweenpages?

245  

This should work:

这应该工作:

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

Please note current browser support (12-03-2014):

请注意当前浏览器支持(12-03-2014):

• Chrome - 1.0+
• 铬- 1.0 +
• Firefox (Gecko) - 19.0+
• Firefox(壁虎)- 19.0 +
• Internet Explorer - 8.0+
• Internet Explorer - 8.0 +
• Opera - 7.0+
• 歌剧- 7.0 +
• Safari - 1.3+ (312)
• Safari 1.3 +(312)

17  

Only a partial solution: The only way I could get this to work for IE was to wrap each div in it's own table and set the page-break-inside on the table to avoid.

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

3  

I have the same problem bu no solution yet. page-break-inside does not work on browsers but Opera. An alternative might be to use page-break-after: avoid; on all child elements of the div to keep togehter ... but in my tests, the avoid-Attribute does not work eg. in Firefox ...

我有同样的问题，但还没有解决方案。打开页面-在浏览器上不工作，而是在Opera上工作。另一种选择可能是使用page-break-after: avoid;在所有子元素的div保持在一起…但是在我的测试中，回避属性不起作用。在Firefox中……

What works in all ppular browsers are forced page breaks using eg. page-break-after: always

在所有的ppular浏览器中使用的是强制分页符。page-break-after:总是

2  

The possible values for page-break-after are: auto, always, avoid, left, right

页面中断后的可能值是:auto, always, avoid, left, right

I believe that you can’t use thie page-break-after property on absolutely positioned elements.

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

2  

page-break-inside: avoid; definitely does not work in webkit, in fact has been a known issue for 5+ years now https://bugs.webkit.org/show_bug.cgi?id=5097

page-break-inside:避免;肯定不能在webkit中工作，事实上已经有5年了，现在https://bugs.webkit.org/show_bug.cgi?id=5097

As far as my research has gone, there is no known method to accomplish this (I am working on figuring out my own hack)

就我的研究而言，还没有已知的方法来实现这个目标(我正在研究我自己的方法)

The advice I can give you is, to accomplish this functionality in FF, wrap the content that you don;t want to break ever inside a DIV (or any container) with overflow: auto (just be careful not to cause weird scroll bars to show up by sizing the container too small).

我可以给您的建议是，要在FF中实现这个功能，请将不希望在DIV(或任何容器)中被溢出的内容打包:auto(只要注意不要因为容器的大小太小而导致奇怪的滚动条出现)。

Sadly, FF is the only browser I managed to accomplish this in, and webkit is the one I am more worried about.

遗憾的是，FF是我成功完成的唯一浏览器，而webkit是我最担心的。

2  

page-break-inside: avoid; gave me trouble using wkhtmltopdf.

page-break-inside:避免;我在使用wkhtmltopdf时遇到了麻烦。

To avoid breaks in the text add display: table; to the CSS of the text-containing div.

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

I hope this works for you too. Thanks JohnS.

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

1  

One pitfall I ran into was a parent element having the 'overflow' attribute set to 'auto'. This negates child div elements with the page-break-inside attribute in the print version. Otherwise, page-break-inside: avoid works fine on Chrome for me.

我遇到的一个陷阱是一个父元素，它的'overflow'属性设置为'auto'。这将使用打印版本中的page-break-inside属性来否定子div元素。否则，页面-内部-内部:避免在Chrome上为我工作。

0  

In my case I managed to fix the page break difficulties in webkit by setting my selected divs to page-break-inside:avoid, and also setting all elements to display:inline. So like this:

在我的例子中，我通过将所选的div设置为page-break-inside:avoid以及设置所有要显示的元素:inline来解决webkit中的页面中断问题。所以是这样的:

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

}

It seems like page-break-properties can only be applied to inline elements (in webkit). I tried to only apply display:inline to the particular elements I needed, but this didn't work. The only thing that worked was applying inline to all elements. I guess it's one of the large container div' that's messing things up.

看起来页面-break-properties只能应用于内联元素(在webkit中)。我尝试只对我需要的特定元素应用display:inline，但这并不奏效。唯一有效的方法是对所有元素应用内联。我猜是一个大容器div把事情搞砸了。

Maybe someone could expand on this.

也许有人可以对此进行扩展。