文本选择跳到顶部答案

【问题标题】：Text Selection jumps to top文本选择跳到顶部
【发布时间】：2014-07-20 16:10:50
【问题描述】：

我有一些绝对定位的 div，里面有一些文本节点。当我尝试进行跨越 div 的文本选择时，选择会跳转到页面。例如在这个示例代码中http://jsfiddle.net/SQ39f/ 当我尝试选择“第二行”时，当我的光标位于“第二行”和“行”之间时，选择会跳到顶部。

<div>
<div style="position:absolute; font-size: 18px; font-family: sans-serif; left: 422.178px; top: 10.523px; transform: rotate(0deg) scale(1.04982, 1); transform-origin: 0% 0% 0px;" dir="ltr">FIRST</div>
<div style="position:absolute; font-size: 18px; font-family: sans-serif; left: 530.61px; top: 10.523px; transform: rotate(0deg) scale(1.05114, 1); transform-origin: 0% 0% 0px;" dir="ltr">LINE</div>
<div style="position:absolute; font-size: 18px; font-family: sans-serif; left: 422.178px; top: 30.523px; transform: rotate(0deg) scale(1.04982, 1); transform-origin: 0% 0% 0px;" dir="ltr">SECOND</div>
<div style="position:absolute; font-size: 18px; font-family: sans-serif; left: 530.61px; top: 30.523px; transform: rotate(0deg) scale(1.05114, 1); transform-origin: 0% 0% 0px;" dir="ltr">LINE</div>
</div>

【问题讨论】：

标签： javascript css html dom

【解决方案1】：

选择适用于鼠标悬停的元素（如果可选择）。

当鼠标在第二行的第一个和第二个单词之间时，光标下的元素是包含绝对定位DIV的父DIV。

【讨论】：

好的。是否有可用的 CSS 技巧来使这个选择平滑？
我认为为父母关闭pointer-events 并为孩子覆盖它们应该可以解决问题。不幸的是它没有。 :-(
我建议你用空的span左右填充一行中的单词之间的空格，这样选择事件就不会传播到父div。
插入空跨度对我不起作用。我需要计算宽度吗？
是的，要确保的是，在选择过程中，鼠标始终位于其中一个子节点上，而永远不会直接位于父节点上。

【解决方案2】：

您的其他帖子Text selection flickers 重复了这个问题（或几乎）。

但是，为了给希望解决类似问题的其他人提供更准确的解决方案，我将链接 my solution 和 JSFiddle。

这里描述的跳跃问题是通过div width 拉伸（在这种情况下的幻数似乎是81px）和每个文本“行”之间的分隔符 div 的组合来解决的。

【讨论】：