jQuery动态分页符不在标题后 [英] 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?

我将每个带有以下p标签的h2-tag包装到div style ='page-break-inside：避免'-tag中，但是此包装器之后将发生分页符！参见小提琴-html-已注释掉

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

推荐答案

使用此样式避免标题破损

Use this style to avoid breaking of headings

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

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

这篇关于jQuery动态分页符不在标题后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！