Google Chrome 中 DataList (asp.net) 中的分页符

Question

我创建了一个带有Datalist控件的页面，它生成“ID 卡”。您可以在此处
查看工作示例。

问题是我想在Datalist的每4行之后中断页面。

因此，为了执行此操作，我使用以下jQuery代码：

<script type="text/javascript">

        $(document).ready(function () {

            $("#GridView1 tr:nth-child(4n+0)").addClass("breakpage");

        })

    </script> 

还有CSS类：

<style type="text/css">

                .breakpage {

                page-break-after: always;

        }

    </style>

因此，如果您打开页面并检查检查元素，您可以看到 jQuery正在工作，并且它确实在每4行添加该类。

但是，当我尝试打印时，分页符在 Google Chrome 中不起作用（在 Firefox 中工作正常）。

有人可以解释一下代码有什么问题吗？

谢谢。

Answer 1

tr它可能与存在有关，display: table-row而不是display: block 显然 Chrome 只将分页符应用于块级元素。编辑：我刚刚测试了以下设置可以修复它：#GridView1 > tbody > tr {     display: block; }如果我缩小页面的边距，则分页符不会落在下一页上，但是调整卡片的大小也可以解决此问题，这样您就不会拥有完全空白的页面

Answer 2

在 CSS 中尝试一下：#GridView1&nbsp;tr:nth-of-type(4n)&nbsp;{ &nbsp;&nbsp;page-break-after:always; }