在Webkit中打印时控制CSS分页符 [英] Controlling CSS page breaks when printing in Webkit

问题描述

我试图改进使用Webkit打印的html文档的外观，在这种情况下，通过对发生分页的位置施加一些控制。

我可以在我需要使用时插入分页符：

  page-break-after：always; 
  

但是，我找不到一种方法避免在项目中间插入分页符。例如，我有html表不应该在中间分割多个页面。我有这样的印象：

  page-break-inside：avoid; 
  

会阻止分页符插入元素内部，任何东西。我的代码如下：

  .dontsplit {border：2px solid black; page-break-inside：avoid; } 
 
< table class =dontsplit> 
< tr>< td>部分标题< / td>< / tr> 
< tr>< td>< img src =something.jpg>< / td>< / tr> 
< / table> 
  

尽管page-break-inside：avoid指令我仍然得到第一和第二

解决方案

下载了wkhtmltopdf的最新二进制文件 http://code.google.com/p/wkhtmltopdf/ ，并且以下内容似乎有效

  .dontsplit {border：2px solid black; page-break-inside：avoid; } 
 
< table> 
< tr>< td>< div class =dontsplit>部分标题< / div>< / td>< / tr> 
< tr>< td>< div class =dontsplit>< img src =something.jpg>< / div>< / td>< / tr> 
< / table> 
  

参考： http://code.google.com/p/wkhtmltopdf/issues/detail?id=9#c21

谨慎地把边距放在td上，并将其填充到零，并将任何位置放在div上，否则你会得到边缘使它在褶皱之上

I'm attempting to improve the appearance of html documents printed using Webkit, in this case by exerting some control over where page breaks occur.

I'm able to insert page breaks where I need using:

page-break-after: always; 

However, I can't find a way to avoid page breaks being inserted in the middle of items. For example, I have html tables that should not be split in the middle across multiple pages. I had the impression that

page-break-inside: avoid;

would prevent a page break from being inserted inside the element, but it doesn't seem to be doing anything. My code looks like:

.dontsplit { border: 2px solid black; page-break-inside: avoid; }

<table class="dontsplit">
    <tr><td>Some title</td></tr>
    <tr><td><img src="something.jpg"></td></tr>
</table>

Despite the page-break-inside: avoid directive I still get the table split between the first and second row into separate pages.

Any ideas?

解决方案

Downloaded a recent binary of wkhtmltopdf http://code.google.com/p/wkhtmltopdf/, and the following seems to work.

.dontsplit { border: 2px solid black; page-break-inside: avoid; }

<table>
  <tr><td><div class="dontsplit">Some title</div></td></tr>
  <tr><td><div class="dontsplit"><img src="something.jpg"></div></td></tr>
</table>

reference: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9#c21

Prudent to put margin, and padding to zero on the td, and place any on the div, otherwise you'll get "edges" making it over the folds

这篇关于在Webkit中打印时控制CSS分页符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！