Question

我正在打印一些东西。我有一个动态页面，其中包含可变数量的块级元素。有些可能是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，post rendering，并测量每页的每个元素，累加高度，当最后一个元素加起来大于页面高度时，我添加一个page-break-before ：总是对那个元素，但只有当我假定某个页面大小时才有效，这绝不是一个好的假设。

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个衬垫是没有意义的。

Answer 1

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

Answer 2

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

添加您的样式。然后在每个部分中添加保持在一起的类。

解决页面突破问题：避免

2 个答案: