jquery dynamic page break not after heading

问题

I'm working on dynamic responsive text columns. Basis is this script here fiddle, modified see here: fiddle

Issue, amongst others, is pagebreak not after heading. Can anyone help?

I wrapped each h2-tag with its following p-tag into div style='page-break-inside: avoid'-tag, but then a page break will occur after this wrapper! see fiddle - html - commented out

$(document).ready(function() {

  var o = $('#text_all').first(),
    h = $(window).height() * 0.75,
    c = $('<div/>').css('width', $(window).width() * .9).addClass('part col'),
    cc, i = 1,
    item,
    p = $('<div id="pagination"></div>').append($('<a/>')
      .text(1).data({
        i: 0
      }));
  o.before(p);

  do {
    if (typeof cc == 'undefined') {
      cc = c.clone().appendTo(o);
    }

    item = o.children().not('.part').first().appendTo(cc.first());

    if (cc.children().length > 0 && cc.height() >= h) {
      p.append($('<a/>').data({
        i: i++
      }).text((i)));
      cc = c.clone().appendTo(o).append(item);
    }

  } while ($('#text_all').first().children().not('.part').length > 0);

  if ($('.part', o).length < 2) {
    p.remove();
    return;
  }
  $('.part', o).not(':eq(0)').hide();
  $('a', p).click(function() {
    var _this = $(this);
    $('a', _this.parent()).removeClass('current');
    _this.addClass('current');

    $('#text_all>.part').hide().eq(_this.data('i')).show();
  }).first().addClass('current');


  return;
});

回答1:

Use this style to avoid breaking of headings

h2 {
  display : inline-flex;
  width:500px;
}

Updated https://jsfiddle.net/0tdygpwf/

来源：https://stackoverflow.com/questions/57370327/jquery-dynamic-page-break-not-after-heading