blocks|key|1332905|text|分页后的可能值为：auto,+always,+avoid,+left,+right|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1332906|我相信你不能在绝对定位的元素上使用这个换页后属性。|1332907|entityMap^0|9|W|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

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

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

blocks|key|1332972|text|只有一个部分的解决方案:我可以让它在IE中工作的唯一方法是将每个div包装在它自己的表中，并在表中设置page-break-inside以避免。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1332973|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1548407|text|page-break-inside:避免；在webkit中肯定不起作用，事实上现在https://bugs.webkit.org/show_bug.cgi?id=5097已经是5%2B多年的一个已知问题了|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1548408|就我的研究而言，还没有已知的方法来实现这一点(我正在研究自己的黑客)|1548409|我能给你的建议是，为了在FF中实现这一功能，用overflow:+auto包装你不想在DIV+(或任何容器)中破坏的内容(只是小心不要因为容器太小而导致奇怪的滚动条出现)。|1548410|不幸的是，FF是我唯一能够做到这一点的浏览器，而webkit是我更担心的一个。|1548411|entityMap|0|LINK|mutability|MUTABLE|url|https://bugs.webkit.org/show_bug.cgi?id=5097^0|15|18|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

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

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

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

blocks|key|1333103|text|在我的例子中，我设法修复了webkit中的分页困难，方法是将我选择的div设置为page-+break+-inside:avoid，并将所有元素设置为display:inline。所以就像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333104|@media+print{
*+{
++++display:inline;
}
script,+style+{+
++++display:none;+
}
div+{
++++page-break-inside:avoid;
}

}|code-block|syntax|javascript|1333105|分页属性似乎只能应用于内联元素(在webkit中)。我尝试只将display:inline应用于我需要的特定元素，但这不起作用。唯一有效的方法是将内联应用于所有元素。我猜是一个大的容器div把事情搞乱了。|1333106|也许有人可以在这方面做一些扩展。|1333107|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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:

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

}
</code></pre>

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.

Maybe someone could expand on this.

blocks|key|1333169|text|page-break-inside:+avoid;让我在使用wkhtmltopdf时遇到了麻烦。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1333170|若要避免文本中断，请将display:+table;添加到包含文本的div的CSS中。|1333171|我希望这对你也有效。谢谢，JohnS。|1333172|entityMap^0|0|P|0|B|F|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<code>page-break-inside: avoid;</code> gave me trouble using wkhtmltopdf.

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

I hope this works for you too. Thanks JohnS.

blocks|key|1333220|text|我遇到的一个陷阱是一个父元素的'overflow‘属性设置为'auto’。这将否定打印版本中具有page-break-inside属性的子div元素。除此之外，对我来说，page-break-inside:+avoid在Chrome上运行得很好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1333221|entityMap^0|2D|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

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, <code>page-break-inside: avoid</code> works fine on Chrome for me.

blocks|key|1333274|text|@media+print{
++++/*+use+your+css+selector+*/++++
++++div{+
++++++++page-break-inside:+avoid;
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1333275|对于所有新浏览器，此解决方案都有效。查看caniuse.com/#search=page-break-inside|unstyled|1333276|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

For all new browser this solution works. See caniuse.com/#search=page-break-inside

blocks|key|1548731|text|我也不得不处理wkhtmltopdf。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1548732|我使用Bootstrap+3.3.7作为框架，需要避免.row元素上的分页符。|1548733|我使用这些设置完成了这项工作：|1548734|.myContainer+{
++++display:+grid;
++++page-break-inside:+avoid;
}|code-block|syntax|javascript|1548735|不需要包装在@media+print中|1548736|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I had to deal with wkhtmltopdf too.
I'm using Bootstrap 3.3.7 as Framework and need to avoid page break on .row element.
I did the job using those settings:
<pre class="lang-css prettyprint-override"><code>.myContainer {
 display: grid;
 page-break-inside: avoid;
}
</code></pre>
No need to wrap in @media print

I'm writing a plug-in for a piece of software that takes a big collection of items and pops them into HTML in a WebView in Cocoa (which uses WebKit as its renderer, so basically you can assume this HTML file is being opened in Safari).

The DIVs it makes are of dynamic height, but they don't vary too much. They're usually around 200px. Anyway, with around six-hundred of these items per document, I'm having a really rough time getting it to print. Unless I get lucky, there's an entry chopped in half at the bottom and top of every page, and that makes actually using printouts very difficult.

I've tried page-break-before, page-break-after, page-break-inside, and combinations of the three to no avail. I think it might be WebKit not properly rendering the instructions, or maybe it's my lack of understanding of how to use them. At any rate, I need help. How can I prevent the cutting-in-half of my DIVs when printing?

CSS Printing: Avoiding cut-in-half DIVs between pages?

容器

我正在为一个软件编写一个插件，它接收大量项目，并将它们弹出到Cocoa中的WebView中(它使用WebKit作为呈现程序，所以基本上可以假设这个HTML文件是在Safari中打开的)。它生成的DIVs是动态高度的，但它们没有太大的变化。它们通常在200px左右。无论如何，每个文档大约有600个这样的项目，我真的很难让...

问CSS打印:避免在页面之间切成两半的DIVs？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS打印:避免在页面之间切成两半的DIVs？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS打印:避免在页面之间切成两半的DIVs？
EN