3

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

我知道 page-break-inside:avoid; 当它被实现时（Opera、Chrome 和 IE7+ 仅在严格的 html 模式下支持）假设防止块级元素环绕 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 衬里是没有意义的。

4

2 回答 2

0

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

于 2013-02-21T16:59:08.650 回答
0 
.keep-together {
        page-break-inside: avoid;
   }

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

于 2019-03-19T11:41:42.097 回答