page-break-inside在Chrome中无法使用？ [英] page-break-inside doesn't work in Chrome?

问题描述

我在一个网页上有一堆段落：

 < p& ...< / p> 
< p> ...< / p> 
< p> ...< / p> 
  

这些段落的CSS规则是：

  p {
 margin：20px 0; 
 page-break-inside：avoid; 
} 
  

在线演示：

这是真的：

  page-break-before 
 page-break -after 
 page-break-inside 
  

但是，不起作用（至少在5.1.7中）

我希望这有助于!!!

I have a bunch of paragraphs on a page:

<p> ... </p>
<p> ... </p>
<p> ... </p>

The CSS rule for those paragraphs is:

p {
    margin: 20px 0;
    page-break-inside: avoid;
}

Live demo: http://jsfiddle.net/KE9je/2/show/

If I understand the page-break-inside property correctly, the above should ensure that no paragraph is split between two pages. (A paragraph is either displayed on the "current" page, or if it doesn't fit completely, it's moved to the next page.)

This doesn't seem to work in Chrome. Open the demo, right-click the page, choose "Print...". You'll see a print preview - the fifth paragraph is split between page 1 and 2.

What am I doing wrong? How can I make this work in Chrome?

---

解决方案

Actually, it DOES work in Chrome, and the solution is really silly!!

Both the parent and the element onto which you want to control page-breaking must be declared as:

position: relative

check out this fiddle: http://jsfiddle.net/petersphilo/QCvA5/5/show/

This is true for:

page-break-before
page-break-after
page-break-inside

However, controlling page-break-inside in Safari does not work (in 5.1.7, at least)

i hope this helps!!!

这篇关于page-break-inside在Chrome中无法使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！