Javascript 将div拆分为每个div的最大高度

试图找出一种方法，从500像素的高度将一个div分割成单独的div。到目前为止，代码如下。有什么提示吗

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

编辑：

---

div区域是固定宽度的。我在分页符函数中使用它，需要处理一个div比一个页面长的情况，需要将其拆分为几个较小的div才能在分页符函数中工作，我不确定它是否性能优异，但有一种方法（或者希望给你一个主意）是：

• 迭代元素的TextNode字符
• 在每个字符处计算

  范围

  的y

  boundingClientRect（）。底部

• 在

  索引处填充
  页面
  数组从
  楼层（y/breakAtY）

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

使用

100

px作为分页符的示例：

功能分页（el，breakAtY）{
常量页=[]，
elY=el.getBoundingClientRect（）.top，
node=el.childNodes[0]，//TextNode
text=el.textContent，
len=text.length，
rng=document.createRange（）；
对于（var c=0；c

#演示{字体大小：1.2em；宽度：300px；}

---

使用100px高度分页的示例-Lorem ipsum dolor sit amet，Concetetur Adipising elit。在圣约翰岛的一个地方，一个有智慧的人，一个有智慧的人，一个有智慧的人，一个有智慧的人，一个有智慧的人，一个有智慧的人，一个有智慧的人。奥姆尼斯，一张脸，一张脸，一张脸，一张脸，一张脸。发明人vitae aspernatur nihil est Obsecati rerum cupiditate sequi nemo Temperibus fugiat.

使用

分页符后的
手动设置分页符以便打印

为了直观地显示“分页符”，CSS可以在不改变文本内容的情况下执行此操作。JavaScript用于根据文本高度计算所需的“分页符”数量。下面的示例使用100px的分页符距离来保持示例的紧凑性，但是对于较长的文本，可以很容易地将其更改为500px

我将留给更聪明的人去钻研伪元素背后的黑魔法，并解释为什么它会起作用。我所理解的只是包装器上的
：before
与分页符元素上的
clear:both
相结合，使得文本能够流入它本来无法进入的空白处

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


$（文档）.ready（函数（）{
设text=$（“#test”），
pb_距离=100，
pages=数学地板（text.height（）/pb_distance）；
for（设i=0；i
#测试{
文本对齐：对齐；
宽度：400px；
行高：20px；/*测试确认每页5行*/
}
.分页符{
浮动：左；
明确：两者皆有；
宽度：100%；
边框顶部：1px点灰色；
页边距：19px 0 20px 0；/*分页符有效高度*/
}
.pb_包装器：之前{
内容：''；
显示：块；
浮动：左；
高度：140px；/*pb_距离+分页符有效高度*/
}
.pb_包装器：第一个孩子：之前{
高度：100px；/*pb_距离*/
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。纳姆·廷西杜特·马莱苏阿达。无菱形或无侧边，无侧边。这是一个临时的公司。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。乌特廷西登特酒店
leo nisl，sed hendrerit metus placerat ut。莫利斯·拉奥里特之夜。如乌拉姆科珀、弗吉亚特·阿库姆桑（nisi vel feugiat accumsan）、帕塞拉特·埃尼姆（lacus massa Placelat enim）等，在直径处安装了一个完整的扫描电镜。在eleifend semper finibus中安装。塞德·ac·比本杜姆·费利斯。节食
大分子伊普苏姆，非溶剂洛博蒂。这是一个很好的例子。佩朗茨克奥纳雷告诉我们一个尼布·莫利斯，在朗卡斯·普鲁斯·苏西比特。在molestie进行了扫描电镜扫描。埃蒂亚姆·埃吉斯塔斯·波特提托·洛雷姆·奎斯
权杖。不，不，不，不，不，不。
Lorem ipsum dolor sit amet，是一位杰出的献身者。纳姆·廷西杜特·马莱苏阿达。无菱形或无侧边，无侧边。这是一个临时的公司。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。乌特廷西登特酒店
leo nisl，sed hendrerit metus placerat ut。莫利斯·拉奥里特之夜。如乌拉姆科珀、弗吉亚特·阿库姆桑（nisi vel feugiat accumsan）、帕塞拉特·埃尼姆（lacus massa Placelat enim）等，在直径处安装了一个完整的扫描电镜。在eleifend semper finibus中安装。塞德·ac·比本杜姆·费利斯。节食
大分子伊普苏姆，非溶剂洛博蒂。这是一个很好的例子。佩朗茨克奥纳雷告诉我们一个尼布·莫利斯，在朗卡斯·普鲁斯·苏西比特。在molestie进行了扫描电镜扫描。埃蒂亚姆·埃吉斯塔斯·波特提托·洛雷姆·奎斯
权杖。不，不，不，不，不，不。
您可以删除
并添加新元素$（“.container”）。附加（“…”）；可能是重复的，我在div中没有任何子项，只有原始文本。如果没有上述示例中的元素，我如何识别特定点？@KevinLindmark如果开始调整窗口大小，该怎么办？（我至少还有几个其他问题/可能的问题-只是因为你的问题太模糊了。你为什么这么做，最终结果如何？@RokoC.Buljan div区域是固定宽度的。我在分页符函数中使用它，需要处理一个div比一个页面长并且需要拆分成几个较小div的情况
if($("#test").height()>500){
    //Split div into divs of 500 pix

}