Обходите для разрыва страницы: избегайте

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>
...

Я знаю разрыв страницы: избегай; когда это реализовано (поддерживается Opera, Chrome и IE7+ только в строгом html-режиме), допустим, чтобы элемент уровня блока не обернулся вокруг 2 страниц. Так как этот тэг css не поддерживается во всех браузерах, мне интересно, есть ли какие-нибудь обходные пути?

Я пытался использовать jquery, пост-рендеринг и измерять каждый элемент на странице, добавляя высоту, и когда последний добавленный элемент был больше высоты страницы, я добавлял разрыв страницы до: всегда в этот элемент, но это работает, только если я предполагаю определенный размер страницы, и это никогда не является хорошим предположением.

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 вкладыш на одной странице.

Answer 1

Пытаться.myclass{page-break-before: auto;}

Answer 2

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

добавь свой стиль Затем добавьте класс поддержки в каждом разделе.