解决内部分页问题：避免

我目前正在打印一些东西。我有一个动态页面，其中包含可变数量的块级元素。有的可能是1行，有的可能是100多行。

<div class='myclass'><span id="id1">1</span>text 1 line....</span></div>
<div class='myclass'><span id="id2">2</span>text 10 lines....</span></div>
<div class='myclass'><span id="id3">3</span>text 3 lines....</span></div>
<div class='myclass'><span id="id4">4</span>text 100+ lines....</span></div>
...

我知道里面的分页符：避免；当它实现时（仅在严格的 html 模式下受 Opera、Chrome 和 IE7+ 支持）假设防止块级元素环绕 2 个页面。由于这个 css 标签不支持跨浏览器，我想知道是否有任何解决方法？

我尝试使用jquery，后期渲染，并测量每页的每个元素，将高度相加，当最后一个元素相加大于页面高度时，我添加一个 page-break-before:always 到该元素，但只有在我假设一定的页面大小时才有效，而这从来都不是一个好的假设。

sudo code only
document.ready(function(){
  var pagesize = 100;
  var currentheight;
  $('.myclass').each(function(){
    if (currentheight + this.getHeight() > pagesize || this.getHeight > pagesize) {
      this.css('page-break-before', 'always');
      currentheight = this.getHeight() % pagesize;
    }
  });
});

我不想只在每个元素中添加 page-break-before / after :always ，因为在单个页面上有 1 个衬垫是没有意义的。

Try.myclass{page-break-before: auto;}