好吧，我什至不确定这是否可以用我目前的方法来完成。我正在尝试将 HTML 文档的内容放入当前视口大小的页面中。我目前正在通过遍历文档的所有元素并检查它们的顶部偏移量是否在当前页面的边界内来做到这一点，只要不是，这个偏移量就成为新页面的开始，页面边界设置为这个偏移量加上视口的高度。
我面临的问题是，通常会有一个元素（例如段落）的高度大于视口本身，因此即使算法将此元素放在新页面的开头，其内容也会溢出. 我试图找到一种方法来拆分这些元素，使第一个切片占据页面的剩余部分。
这带来了进一步的困难。即使我能找到一种方法来确定一个段落的文本有多少仍然适合页面的其余部分，而这本身已被证明非常困难，我仍然会遇到 DOM 在拆分后没有立即更新的问题段落，这会弄乱下一页的计算，或者至少迫使我打破递归，这会使算法更加复杂。
欢迎任何有关如何以第一个切片占用页面剩余空间的方式拆分段落的建议。到目前为止，这是我的代码：
编辑： 值得注意的是，这只适用于没有绝对定位或浮动元素的非常简单的 HTML。就我而言，这不是问题。
var elementIndex = -1;
var pages = 1;
var pageBoundary = 0;
var pageBreaks = [];
function calculatePages() {
//first page boundary is window height
pageBoundary = $(window).height();
//do calculations
iterateElements($("body"));
//print results
console.log(pageBreaks);
}
function iterateElements(parent) {
$.each($(parent).children(), function(i, e) {
//increase current element index
elementIndex = elementIndex + 1;
//get element's top offset
var offsetTop = $(e).offset().top;
//get the last position that the element occupies
var elementSpan = offsetTop + $(e).outerHeight();
if ($(e).children().length == 0) { //only leaf nodes will be set as page breaks
//element's start position is outside page boundary
if (offsetTop >= pageBoundary) {
//mark page start with red in order to visualize
$(e).attr("style", "border-top: 1px solid red");
//increase page count
pages = pages + 1;
//new page starts at element's top, next page boundary
//is element's starting position plus the viewport's height
pageBoundary = offsetTop + $(window).height();
//store index of page break
pageBreaks.push(elementIndex);
}
//element's start position is inside current page, but contents overflow
else if (elementSpan >= pageBoundary) {
//NO IDEA WHAT TO DO HERE
//NEED A WAY TO SPLIT LARGE ELEMENTS
}
}
iterateElements(e);
});
}
$(function() {
calculatePages();
});