Html page-break-inside 在 Chrome 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7706504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
page-break-inside doesn't work in Chrome?
提问by ?ime Vidas
I have a bunch of paragraphs on a page:
我在页面上有一堆段落：
<p> ... </p>
<p> ... </p>
<p> ... </p>
The CSS rule for those paragraphs is:
这些段落的 CSS 规则是：
p {
margin: 20px 0;
page-break-inside: avoid;
}
Live demo:http://jsfiddle.net/KE9je/2/show/
现场演示：http : //jsfiddle.net/KE9je/2/show/
If I understand the page-break-insideproperty 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.)
如果我page-break-inside正确理解了该属性，则上述内容应确保两页之间没有拆分任何段落。（一个段落要么显示在“当前”页面上，要么如果它不完全适合，则将其移至下一页。）
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.
这在 Chrome 中似乎不起作用。打开演示，右击页面，选择“打印...”。您会看到一个打印预览 - 第 5 段被分成第 1 页和第 2 页。
What am I doing wrong? How can I make this work in Chrome?
我究竟做错了什么？我怎样才能在 Chrome 中做到这一点？
回答by Peter
Actually, it DOESwork in Chrome, and the solution is really silly!!
实际上，它在 Chrome 中确实有效，而且解决方案真的很愚蠢！！
Both the parent and the element onto which you want to control page-breaking must be declared as:
要控制分页的父元素和元素都必须声明为：
position: relative;
Check out this fiddle(or in fullscreen)
This is true for:
这适用于：
page-break-before
page-break-after
page-break-inside
However, controlling page-break-insidein Safari does not work (in 5.1.7, at least)
但是，page-break-inside在 Safari 中控制不起作用（至少在 5.1.7 中）
I hope this helps!!!
我希望这有帮助！！！
回答by Ivan Rogic
This worked best for me:
这对我来说效果最好：
.no-page-break {
display: inline-block;
width: 100%;
page-break-inside: avoid;
}
You can also specify the heightif needed.
height如果需要，您还可以指定。
回答by JSP64
I know this is an old question but Chrome has changed since it was originally answered and this may help.
我知道这是一个老问题，但自最初回答以来，Chrome 已经发生了变化，这可能会有所帮助。
It looks like page-break-inside:avoidworks in Chrome based on the height of the element, so if you are floating a bunch of elements in a div, page-break-inside:avoidwill not work.
它看起来像page-break-inside:avoid基于元素的高度在 Chrome 中工作，所以如果你在一个 div 中浮动一堆元素，page-break-inside:avoid将不起作用。
It's possible to get around this by explicitly defining the height the element you don't want broken up. jQuery example:
可以通过明确定义您不想分解的元素的高度来解决这个问题。jQuery 示例：
$('#page_break_inside_avoid_element').height($('#page_break_inside_avoid_element').height());
回答by Sparky
According to SitePoint, Chrome is not supported here, only Opera (and IE 8 buggy)...
根据 SitePoint 的说法，此处不支持 Chrome，仅支持 Opera（和 IE 8 越野车）...
http://reference.sitepoint.com/css/page-break-inside
http://reference.sitepoint.com/css/page-break-inside
Other references:
其他参考：
http://www.reddit.com/r/css/comments/jdeim/pagebreakinside_avoid_doesnt_work/
http://www.reddit.com/r/css/comments/jdeim/pagebreakinside_avoid_doesnt_work/
Stack Overflow threads:
堆栈溢出线程：
Cross-browser support of `page-break-inside: avoid;`
`page-break-inside: avoid;`的跨浏览器支持
"page-break-inside: avoid "- does not work
Google Chrome Printing Page Breaks
Which browsers support page break manipulation using CSS and the page-break-inside element?
哪些浏览器支持使用 CSS 和 page-break-inside 元素进行分页操作？
Google Chrome Forum:
谷歌浏览器论坛：
http://www.google.com/support/forum
http://www.google.com/support/forum
I will not post the W3Schools link (due to general unreliability) but they also state it's only supported in Opera, for whatever it's worth.
我不会发布 W3Schools 链接（由于普遍不可靠），但他们也声明它仅在 Opera 中受支持，无论其价值如何。
回答by magritte
I just tested this with a larger paragraph in IE9, Chrome 14 and Firefox 7, and it looks like only IE9 works as expected. You might have to resort to adding page breaks manually where you want them with
我刚刚在 IE9、Chrome 14 和 Firefox 7 中用更大的段落对此进行了测试，看起来只有 IE9 才能按预期工作。您可能不得不求助于手动添加分页符的位置
page-break-after:always
Of course that's only any good to you if you know the content length in advance.
当然，如果您提前知道内容长度，这对您有好处。
回答by yPhil
What worked for me (in both FFox & Chrome, that is)
什么对我有用（即在 FFox 和 Chrome 中）
.container {
column-gap: .4em;
columns: 3;
padding: .4em;
}
.contained {
page-break-before: avoid;
page-break-inside: avoid;
page-break-after: always;
}
And that's it ; I didn't need position.
就是这样；我不需要position.
回答by ninbit
For Bootstrappers, be aware that page-break-insideor others may not (highly) work under containeror rowor other classes of bootstrap even if you change manually the position property. When I exclude containerand row, it worked like a charm!
对于Bootstrappers，要知道，page-break-inside或其他人可能不会（高度）下工作container或row或其它类引导，即使你手动更改的位置属性。当我排除containerand 时row，它就像一个魅力！
回答by Charles
Here is how I solved this while writing a css for printing.
这是我在编写用于打印的 css 时解决此问题的方法。
For example, you put some pictures in an HTML file like this:
例如，您将一些图片放入 HTML 文件中，如下所示：
<div class="bottom">
<figure>
<img src="img01.jpg" alt="Front View">
<figcaption>Front View</figcaption>
</figure>
<figure>
<img src="img02.jpg" alt="Rear View">
<figcaption>Rear View</figcaption>
</figure>
</div>
And write the css like this:
并像这样编写css：
.bottom figure{
page-break-inside: avoid;
}
Sometimes it won't work as you expect, because the default value of display for most elements is block or inline, which is not ‘page-break friendly'. I usually change it like this:
有时它不会像您期望的那样工作，因为大多数元素的默认显示值是块或内联，这不是“分页友好”。我通常这样改：
.bottom{
display: contents;
}
This aims to disappear the container, making the child elements children of the element the next level up in the DOM.
这旨在消除容器，使元素的子元素成为 DOM 中的下一个级别。
As for your question, I suggest you to have a look at the display mode of the container of the paragraph to see whether it is set to block. If so, change it to contents and try again.
至于你的问题，建议你看一下段落容器的显示方式，看是否设置为block。如果是这样，请将其更改为内容并重试。
I hope this help.
我希望这会有所帮助。
回答by 2tuzi
check if the parent(or top level container) display is flex; remove it and try again；
it works for me in chrome71
检查父（或顶级容器）显示是否为flex；删除它并重试；它在 chrome71 中对我有用
回答by Thiago Leviatan
It Works for me, like this:
它对我有用，就像这样：
.print{position: absolute;}
.print p{page-break-inside: avoid}
