Javascript wordwrap元素中的可见单词

在一个长的wordwrap元素中，是否有任何方法可以检测左上方最可见的单词

使用每个单词或单词串的跨度不是一个很好的选择，因为文本太长，动态加载是一个很好的性能，但我可以认为这是没有其他出现。 示例代码（使用它）：

#测试{高度：100px；宽度：150px；溢出：自动；}
有很多文字
$（“#测试”）.scrollTop（50）；//模拟用户滚动

现在，您在test div中有了以下内容：

我怎么知道第一个可见的词是“Adpiscing”

答案可以使用任何框架。基于javascript或css。即使不是在所有浏览器上都可以使用的解决方案也是受欢迎的，因为它们可能是一个很好的起点。我就是找不到关于这个问题的任何东西

进一步澄清。

---

如果我有一个长文本，我在浏览器中打开它并向下滚动，然后在另一个设备中打开它，屏幕大小不同，甚至在同一个浏览器中，但放大10倍。哪个属性/逻辑可以确保第一个可见单词始终匹配。简短的回答是，不，你无法获得单词的位置。长话短说，你可以做你想做的事，但这很难

我能想到的是：

• 基于空格的拆分
• 遍历单词标记并在单词前后插入span元素，例如--position absolute，您甚至可以将innerHTML转换为orig

  wordsArray.join（“”）

  ，这样您的空格/单词就可以测量，或者您可以将每个单词包装在span中
• 现在，您可以从父级获取跨距的偏移量，为每个单词提供粗略的坐标
• 根据卷轴计算出哪一个可能是第一个可见的
• 去掉这些跨距

  ---

当你说“单词”时，你是指文本节点中的文本吗？你说“左上方最可见的单词”是什么意思？你需要短语的第一个单词吗？是@gdoron。对于javascript，if是屏幕左上角的第一个单词。对于这个文本块，它将是“是”，因此您需要获得屏幕上最左上角的文本节点？这是我试图避免的暴力：）有一个使用这个的实现，但每个短语有一个跨度。而且它太懒了。每一段一个是可以接受的，但是我的精确度与使用百分比法大致相同，后者是即时的。

<style> #test { height: 100px; width: 150px; overflow: auto; } </style>

<div id=test> with lots of text </div>

<script> $("#test").scrollTop(50); // simulate user scroll </script>