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:void; は知っています。これが実装されると (厳密な html モードの Opera、Chrome、および IE7+ でのみサポートされます)、ブロック レベルの要素が 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;
    }
  });
});

また、単一のページに 1 つのライナーを配置する意味がないため、すべての要素に page-break-before / after :always を追加したくありません。

4

2 に答える 2

0

試す.myclass{page-break-before: auto;}

于 2013-02-21T16:59:08.650 に答える