解决 page-break-inside:avoid答案

【问题标题】：Work around for page-break-inside:avoid解决 page-break-inside:avoid
【发布时间】：2012-07-11 00:50:32
【问题描述】：

我目前正在打印一些东西。我有一个动态页面，其中包含可变数量的块级元素。有些可能是 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:avoid;当它被实现时（Opera、Chrome 和 IE7+ 仅在严格的 html 模式下支持）假设防止块级元素环绕 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;
    }
  });
});

而且我不想只在每个元素中添加 page-break-before / after :always，因为在单个页面上使用 1 行是没有意义的。

【问题讨论】：

您最终找到解决方案了吗？
不，我们正朝着使用 JS 格式化页面的方向发展，以手动插入分页符。 CSS 只是没有一个很好的方法来优雅地格式化分页符，至少在浏览器之间不是一致的。

标签： javascript css printing page-break page-break-inside

【解决方案1】：

试试.myclass{page-break-before: auto;}

【讨论】：

您在回答之前是否真的阅读了问题。 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. Auto 表现出同样的行为，所以还是没用。

【解决方案2】：

.keep-together {
        page-break-inside: avoid;
   }

添加您的风格。然后在每个部分添加保持在一起的类。

【讨论】：