wordwrap元素中的可见单词

Question

在一个很长的wordwrap元素中，有没有办法检测出最左上角的单词？

在每个单词或一堆单词周围使用跨度并不是一个很好的选择，因为文本太长并且动态加载以获得良好的性能，但我可能会认为这不是别的。

示例代码（使用它http://jsfiddle.net/8utcp/2/）：

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

现在你在测试div中有这个：

我怎么知道第一个可见的单词是＆＃34; Adpiscing＆＃34;？

答案可以使用任何框架。基于javascript或css。即使是不适用于所有浏览器的解决方案也是受欢迎的，因为它们可以成为一个很好的起点。我根本无法找到有关此问题的任何内容。

更多澄清。 如果我有一个很长的文本，我在浏览器中打开它并向下滚动，然后我在另一台设备中打开它，使用不同的屏幕尺寸，或者甚至在同一个浏览器中，但是放大10倍。哪个属性/逻辑将确保第一个可见单词始终匹配。＆lt;

Answer 1

简短的回答是，不，你不能得到言语的立场。答案很长，你可以做你想做的事，但这很糟糕。

我能想到的是：

• 基于空白分割
• 单词标记并注入一个span元素，比如说 - 在单词之前和之后的绝对位置，你甚至可以将innerHTML定义为orig wordsArray.join(" <span></span>")，这样你的空格/单词就可以测量，或者你可以包装每一个而是跨度的单词。
• 你现在可以从父母那里获得跨度的偏移，为每个单词提供粗略的坐标
• 计算出来 - 基于滚动 - 哪一个可能是第一个可见的。
• 摆脱跨度。