解決頁面中斷：避免

我目前正在打印一些東西。我有一個動態頁面，它具有可變數量的塊級元素。有些可能是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

解決頁面中斷：避免

回答

相關問題