html – 在Webkit中打印时控制CSS分页符

前端之家收集整理的这篇文章主要介绍了html – 在Webkit中打印时控制CSS分页符前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试改进使用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>Some title</td></tr>
    <tr><td><img src="something.jpg"></td></tr>
</table>

尽管page-break-inside:避免指令我仍然把第一行和第二行之间的表分割成单独的页面

有任何想法吗?

解决方法

下载了最近的一个wkhtmltopdf http://code.google.com/p/wkhtmltopdf/的二进制文件,以下内容似乎很有效。
.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>

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

谨慎地把余量,在td上填充为零,然后放在div上,否则你会得到“边缘”

猜你在找的HTML相关文章