解决了分页，里面：避免(Work around for page-break-inside:avoi

我目前正在上打印的东西。 我有一个动态的页面，它有块级元素的变量数。 一些可以是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>
...

我知道分页-内部：避免; 当它被执行（由歌剧，铬，和IE7 +严格HTML模式仅支持）假设以防止块级元素缠绕2页。 由于这个CSS标签不跨浏览器的支持，我想知道，如果有任何的工作了身边？

我试图使用jQuery的，后期渲染，并测量每个每页的元素，增加了高度，并在最后一个元素加起来比页面高度时，我添加了一个页面，先断后合：总是该元素，但只有工作，如果我想为特定页面大小，这是从来没有一个好的假设。

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;
    }
  });
});

我不希望只是添加分页符，前/后：始终把每一个元素，因为没有意义有一个单独的页面上的1个衬垫。

Answer 1:

尝试.myclass{page-break-before: auto;}

Answer 2:

.keep-together {
        page-break-inside: avoid;
   }

加你的风格。 然后，在每个部分中添加的保持在一起的类。

文章来源: Work around for page-break-inside:avoid