解决内部分页符问题:避免

Work around for page-break-inside:avoid

本文关键字：避免 问题 内部 分页 解决      更新时间：2023-09-26

我目前正在打印一些东西。我有一个动态页面，其中有可变数量的块级元素。有些可能是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、后期渲染和测量每页的每个元素，将高度相加，当最后一个元素相加后大于页面高度时，我会在之前添加一个分页符：总是添加到该元素中，但只有当我假设某个页面大小时，这才有效，这从来都不是一个好的假设。

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行是没有意义的。

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

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

添加你的风格。然后在每一节中添加keep-together类。

相关文章：