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

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

我可以在需要的地方插入分页符:

page-break-after: always; 

但是,我找不到一种方法来避免在项目中间插入分页符.例如,我有html表,不应在多个页面的中间拆分.我的印象是

page-break-inside: avoid;

会阻止分页插入元素内,但它似乎没有做任何事情.我的代码看起来像:

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


    
Some title
    

尽管存在page-break-inside:avoid指令,我仍然将第一行和第二行之间的表拆分为单独的页面.

有任何想法吗？

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

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


  
Some title
  

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

谨慎放置边距,并在td上填充为零,并在div上放置任何一个,否则你将获得"边缘"使其超过折叠

正如cliffordlife所说,

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

将工作.但不适用于Firefox.在Firefox中,你要做的是检查高度,然后page-break-after: always;在相关时添加.

平均而言,上下边距为1英寸.因此,为了测量10英寸页面将消耗多少像素,我使用了这个:

var pageOfPixels;
(function(){
    var d = document.createElement("div");
    d.setAttribute("style", "height:9in;position:absolute;left:0px;top:0px;z-index:-5;");
    document.body.appendChild(d);
    pageOfPixels = $(d).height();
    d.parentNode.removeChild(d);
})();

我有很多div,每个div都有很多段落.所以我做的是迭代它们,然后将当前页面上它们的当前高度与pageOfPixels值进行比较.

var currentPosition = 0;
$('.printDiv').each(function (index, element) {
    var h = $(this).height();
    if (currentPosition + h > pageOfPixels) {
        //add page break
        $('.printDiv').eq(index - 1).css("page-break-after", "always");
        currentPosition = h;
    } else {
        currentPosition += h;
    }
});

这在firefox中对我有用.