Question

试图找出一种将div分成高度为500 px的单独div的方法。到目前为止的代码如下。有提示吗？

<div id="test"> LOTS of TEXT WITH HEIGHT OVER 500PX</div>

jQuery

if($("#test").height()>500){
    //Split div into divs of 500 pix

}

修改：
div区域是固定宽度。我在分页符功能中使用它，需要处理div比页面长并且需要拆分为几个较小的div才能在分页符功能中工作的情况

Answer 1

不确定它是否性能卓越，但是一种实现方法（或希望给您一个主意）将是：

迭代元素的 TextNode 字符
在每个字符上计算Range的 y boundingClientRect().bottom
将pages数组填充到从 floor(y / breakAtY)

index

返回一个包含分页断点文本的数组

_{使用100 px作为分页符的示例：}

function paginate(el, breakAtY) {
  const pages = [],
    elY = el.getBoundingClientRect().top,
    node = el.childNodes[0], // TextNode
    text = el.textContent,
    len = text.length,
    rng = document.createRange();

  for (var c = 0; c < len; c++) {
    rng.setStart(node, c);
    const i = ~~((rng.getBoundingClientRect().bottom - elY) / breakAtY);
    pages[i] = (pages[i] || '') + text[c];
  }
  return pages;
}


const myPages = paginate(document.getElementById("demo"), 100);
console.log(myPages); // Array of three pages text

#demo { font-size: 1.2em; width: 300px; }

<div id="demo">Example using 100px height pagination - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque consequatur rerum, quia placeat praesentium, sapiente eos qui omnis ratione repellendus accusamus, voluptates quos corrupti recusandae officiis quam rem, sint at. Iusto omnis, quas facere neque delectus aliquam, eligendi quibusdam ea. Inventore vitae aspernatur nihil est obcaecati rerum cupiditate sequi nemo temporibus fugiat.</div>

注意：根据要求，以上内容旨在用于仅具有TextNode作为其唯一子节点的元素（无内部元素！）

Answer 2

使用page-break-after手动设置分页符以进行打印。

要直观地显示“分页符”，CSS可以做到这一点而无需更改文本内容。 JavaScript用于根据文本的高度计算所需的“分页符”数量。下面的示例使用100px的分页符距离来使示例紧凑，但对于较长的文本，可以轻松地将其更改为500px。

我将把它留给明智的人们去研究伪元素背后的妖术，并解释为什么它甚至起作用。我所能理解的是，包装器上的:before与分页符上的clear:both结合在一起使文本流入了其他情况下无法实现的间隙。

编辑：已修复，可以更好地进行可视化，测试和命名。现在可以正确计算距离+高度，包括第一个孩子的偏移量。

$(document).ready(function() {
  let text = $('#test'),
    pb_distance = 100,
    pages = Math.floor(text.height() / pb_distance);

  for (let i = 0; i < pages; i++) {
    text.prepend("<div class='pb_wrapper'><div class='pagebreak'></div></div>");
  }
});

#test {
  text-align: justify;
  width: 400px;
  line-height: 20px; /* testing to confirm 5 lines per page */
}

.pagebreak {
  float: left;
  clear: both;
  width: 100%;
  border-top: 1px dotted gray;
  margin: 19px 0 20px 0; /* pagebreak effective height */
}

.pb_wrapper:before {
  content: '';
  display: block;
  float: left;
  height: 140px; /* pb_distance + pagebreak effective height */
}

.pb_wrapper:first-child:before {
  height: 100px; /* pb_distance */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt vulputate malesuada. Nulla rhoncus ornare lectus, eget tristique ex euismod nec. Cras tempor quam a sem ullamcorper pharetra. Vivamus pretium lectus lobortis aliquam pretium. Ut tincidunt
  leo nisl, sed hendrerit metus placerat ut. Vivamus tincidunt mollis laoreet. Sed ullamcorper, nisi vel feugiat accumsan, lacus massa placerat enim, sit amet finibus odio sem at diam. Proin eleifend semper finibus. Sed ac bibendum felis. In imperdiet
  ipsum a magna molestie, non sollicitudin lorem lobortis. Fusce porta laoreet erat, et varius ipsum egestas sed. Pellentesque ornare tellus a nibh mollis, at rhoncus purus suscipit. Sed tempor eget sem at molestie. Etiam egestas porttitor lorem quis
  scelerisque. Nullam nibh dolor, imperdiet et felis ut, tempus pellentesque quam.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt vulputate malesuada. Nulla rhoncus ornare lectus, eget tristique ex euismod nec. Cras tempor quam a sem ullamcorper pharetra. Vivamus pretium lectus lobortis aliquam pretium. Ut tincidunt
  leo nisl, sed hendrerit metus placerat ut. Vivamus tincidunt mollis laoreet. Sed ullamcorper, nisi vel feugiat accumsan, lacus massa placerat enim, sit amet finibus odio sem at diam. Proin eleifend semper finibus. Sed ac bibendum felis. In imperdiet
  ipsum a magna molestie, non sollicitudin lorem lobortis. Fusce porta laoreet erat, et varius ipsum egestas sed. Pellentesque ornare tellus a nibh mollis, at rhoncus purus suscipit. Sed tempor eget sem at molestie. Etiam egestas porttitor lorem quis
  scelerisque. Nullam nibh dolor, imperdiet et felis ut, tempus pellentesque quam.
</div>

将div划分为div，每个div的最大高度为

2 个答案: