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

Finding the first word that browsers will classify as overflow

本文关键字：第一个 单词 溢出 浏览器 分类 查找      更新时间：2023-09-26

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

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

1.克隆div，逐渐去掉单词，直到克隆的高度/宽度小于原始的高度/宽
太慢了。我想我可以通过指数级地剥离单词，然后慢慢地填充它来加快速度——跑过目标，然后慢慢后退，直到我准确地击中它——但这种方法本身似乎有点暴力。

2.对div的尺寸进行计算，计算出水平和垂直方向适合多少ems如果所有内容都是统一的文本，那就太好了，就像一本书一样，但我希望处理标题和图像之类的内容，这会给这本书带来麻烦。浏览器不同的默认字体偏好（100%？144%？）也使情况变得复杂

3.将项目渲染为令牌，当用户在屏幕上看不到有问题的元素（即一个角色）时停止这将是我的首选方法，因为它只需要对渲染的元素进行某种isVisible（）检查。不过，我不知道这是否与浏览器选择的渲染方式一致。

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

您不需要克隆div，只需要有一个overflow:hiddendiv，并在每次需要推进"页面"时设置div.scrollTop += div.height。（即使浏览器不会显示滚动条，您仍然可以通过编程使div滚动。）

通过这种方式，您可以让浏览器处理设计要做的事情（内容流）。

以下是一个将自动在页面中前进的片段：（演示）

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

如果你不想（例如）标题被切成两半，你也可以做一些麻烦来确保"页面"不会从块级元素的中间开始。不幸的是，要确保一行文本不会被切成两半要困难得多（也许是不可能的）。

相关文章：