解决页面中断：避免 [英] Work around for page-break-inside:avoid

问题描述

我目前正在打印东西。我有一个动态页面，它有可变数量的块级元素。有些可能是1行，有些可能是100+行。

I am currently working on printing something. I have a dynamic page where it has variable numbers of block level elements. Some may be 1 line, and some may be 100+ lines.

<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：当它被实现（支持Opera，Chrome和IE7 +在严格的html模式只）假设阻止块级元素环绕2页。因为这个CSS标签不支持跨浏览器，我想知道是否有任何工作吗？

I know the page-break-inside:avoid; when it is implemented (supported by Opera, Chrome, and IE7+ in strict html mode only) suppose to prevent a block level element wrapping around 2 pages. Since this css tag is not support across browsers I am wondering if there are any work around yet?

我试图使用jquery，post渲染，并测量每个元素每页，加上高度，当最后一个元素加起来大于页面高度，我添加一个page-break-before：always到那个元素，但只有当我假设一个特定的页面大小，这不是一个好的假设。

I have attempted to use jquery, post rendering, and measure each of the element per page, adding up the height, and when the last element added up to be greater than the page height, i add a page-break-before:always to that element, but that only work if I assume a certain page size, and that is never a good assumption.

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：因为在单个页面上有1个衬垫没有意义。

And I don't want to just add page-break-before / after :always to every element because doesn't make sense to have a 1 liner on a single page.

推荐答案

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

这篇关于解决页面中断：避免的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！