解決頁面突破問題：避免

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：always to那個元素，但只有當我假定某個頁面大小時才能工作，這絕不是一個好的假設。

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;
   }

添加你的風格。 然后在每個部分添加keep-together類。