解决页面中断：避免

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

我知道页面中断：避免;当它被实现时（Opera，Chrome和IE7 +仅以严格的html模式支持）假设阻止块级元素大约包装2页。由于这个CSS标签不支持跨浏览器，我想知道是否有任何工作呢？

我试图使用jQuery，后期渲染，并测量每个页面的每个元素，加起来的高度，以及当最后一个元素加起来大于页面高度时，我添加一个page-break-之前：总是对那个元素，但只有当我假设一定的页面大小时才有效，这绝不是一个好的假设。

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个衬垫。

来源

2012-07-11 Churk

你最终是否想出了一个解决方案？ – 2013-12-11 22:18:54

不，我们正在朝着使用JS格式化页面的方式来手动插入分页符。 CSS没有很好的方式来优雅地分页，至少在浏览器中不一致。 – Churk 2014-01-06 13:52:38

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

来源

2013-02-21 16:59:08

你在回答之前是否真的阅读过这个问题。 '我不想在页面中断之前/之后添加页面中断：始终添加到每个元素中，因为在单个页面上放置1个内容没有意义。“自动显示相同的行为，所以它仍然是无用的。 – Churk 2013-02-21 21:13:59

解决页面中断：避免

回答

相关问题