CSS 打印:避免页面之间的 DIV 对半切开? [英] CSS Printing: Avoiding cut-in-half DIVs between pages?
问题描述
我正在为一个软件编写一个插件，该软件在 Cocoa 中的 WebView(使用 WebKit 作为其渲染器，所以基本上你可以假设这个 HTML 文件是正在 Safari 中打开).
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).
它制作的 DIV 具有动态高度，但变化不大.它们通常在 200px 左右.无论如何，每个文档大约有六百个这样的项目，我很难把它打印出来.除非我很幸运，否则每页的底部和顶部都有一个条目被切成两半，这使得实际使用打印输出变得非常困难.
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.
我尝试过分页前、后分页、内分页以及三者的组合都无济于事.我认为可能是 WebKit 没有正确呈现说明，或者可能是我对如何使用它们缺乏了解.无论如何，我需要帮助.打印时如何防止 DIV 被切割成两半?
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?
推荐答案
使用 闯入 应该可以工作:
Using break-inside should work:
@media print {
div {
break-inside: avoid;
}
}
它适用于所有主要浏览器:
- Chrome 50+
- Edge 12+
- Firefox 65+
- Opera 37+
- Safari 10+
使用 page-break-inside: avoid; 也应该有效，但已经完全弃用 break-inside: avoid.
Using page-break-inside: avoid; instead should work too, but has been exactly deprecated by break-inside: avoid.
这篇关于CSS 打印:避免页面之间的 DIV 对半切开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
