私は現在、何かを印刷する作業を行っています。可変数のブロック レベル要素を持つ動的ページがあります。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 を追加したくありません。