jquery dynamic page break not after heading

Question

我正在研究动态响应文本列。这个脚本是这里的小提琴，修改后，请参见：小提琴

问题，除其他问题上，没有出发后。谁能帮忙？

我将每个H2标签包裹在以下p-tag中插入div style ='page-break-inside：避免使用'tag，但是随后将在此包装后发生页面上断！请参阅小提琴 - html-评论

$(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;
});

Answer 1

使用此样式避免打破标题

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

更新https://jsfiddle.net/0tdygpwf/