Javascript 查找浏览器将分类为溢出的第一个单词

我希望构建一个没有滚动的页面，并且能够识别主div的内容溢出的位置。代码将记住这一点，并构建一个从该单词或元素开始的单独页面

我花了几个小时来摆弄，以下是过去问题采用的方法：

一,。克隆div，逐渐删除单词，直到克隆的高度/宽度小于原始高度/宽度。
太慢了。我想我可以通过成倍地去除单词，然后慢慢地填充它来加快速度——跑过目标，然后慢慢地回溯，直到我准确地击中它——但这种方法本身似乎有点蛮力

二,。对div的尺寸进行计算，计算出水平和垂直安装的ems数量。 如果所有内容都是统一的文本，就像一本书，那就好了，但我希望能处理标题、图片等等，这会给这本书带来麻烦。浏览器不同的默认字体首选项（100%？144%？）也使问题变得复杂

三,。将项目呈现为标记，当用户在屏幕上看不到相关元素（即一个字符）时停止。 这是我的首选方法，因为它只涉及对渲染元素的某种isVisible（）检查。不过，我不知道这是否与浏览器选择渲染的方式一致

---

有没有关于如何做到这一点的建议？或者，浏览器设计为在决定是否需要滚动条之前呈现整个页面长度吗？

您不需要克隆div，只需在每次需要推进“页面”时设置

overflow:hidden

div并设置

div.scrollTop+=div.height

。（即使浏览器不显示滚动条，您仍然可以通过编程方式使div滚动。）

通过这种方式，您可以让浏览器处理其设计目的（内容流）

下面是一个片段，它将自动浏览页面：

---

你也可以做一些拨弄，以确保一个“页面”不在块级元素的中间开始，如果你不希望（例如）标题被切成两半。不幸的是，要确保一行文本不被切成两半要困难得多（也许是不可能的）。

相对于分割的行，您可以在页面的前景顶部和底部添加一些（css伪）元素，并使用垂直线性渐变。让它看起来真的很好看：-）我不知道它的存在。谢谢为了使每个代码段感觉像它自己的页面，我需要一种方法来检测块级元素是否强制溢出。现在克隆和比较仍然是我的全部…是否有一个浏览器函数可以显示什么东西溢出了？@middnightInfour:循环遍历容器中的每个元素，如果它是块级元素

$（“#pages*”）.each（function（）{$（this.css（'display'）='block'）

，然后将

this.offsetTop

添加到数组中。使用该数组可以知道在设置

scrollTop

时要捕捉到哪些像素，以便块级元素始终从顶部开始。

var div = $('#pages'), h = div.height(), len = div[0].scrollHeight, p = $('#p');
setInterval(function() {
   var top = div[0].scrollTop += h;
   if (top >= len) top = div[0].scrollTop = 0;
   p.text(Math.floor(top/h)+1 + '/' + Math.ceil(len/h)); // Show 'page' number
}, 1000);