javascript - 文本选择闪烁

Question

对于按以下格式布局的 div，我怎样才能使文本选择顺畅 http://jsfiddle.net/SQ39f/2/ .您可以看到在选择过程中，选择突出显示跳到顶部并闪烁。尝试选择文本“第二行”也不是说我无法控制位置、左侧和顶部样式属性，因为它们是由第三方设置的。我可以添加其他样式。

<div>
<div style="position:absolute ;left: 100.178px; top: 10.523px">FIRST</div>
<div style="position:absolute;left: 180.61px; top: 10.523px;">LINE</div>
<div style="position:absolute; left: 100.178px; top: 30.523px;">SECOND</div>
<div style="position:absolute;  left: 190.61px; top: 30.523px;" >LINE</div>

Answer 1

这是我想出的:

HTML-

<div>
    <div class="tag" style="position:absolute;left:100.178px;top:10.523px;">FIRST</div>
    <div class="line" style="position:absolute;left:180.61px;top:10.523px;">LINE</div>
    <div></div>
    <div class="tag" style="position:absolute;left:100.178px;top:30.523px;">SECOND</div>
    <div style="position:absolute;left:160.61px;top:30.523px;display:none;" >&nbsp; &nbsp; &nbsp; &nbsp;</div>
    <div class="line" style="position:absolute;left:180.61px;top:30.523px;" >LINE</div>
</div>

CSS-

.tag {
    width:81px;
    height:18px;
}
.line {
    padding-right:100px;
    height:18px;
}

设置 height:18px; 标准化选择高度；设置 width:81px 桥接左右 div 之间的间隙，刚好让它们接触，但不重叠。不需要充满不间断空格的div，所以我将它的display设置为none。如果可以，请完全删除该元素。

通过在第一个“LINE”div 和“SECOND”div 之间添加一个div 来防止选择第二行跳转到第一行。 This acts as a spacer between the lines, so when the selection jumps to the previous div you don't see any graphical change.

padding-right:100px 扩展了 div 的框并允许您将光标进一步拖动到文本的右侧并仍然保持对该行的选择。我不建议将它设置在 10px 以下，否则在选择第二行时第一行的最后一个字符可能会闪烁。

此方法适用于任意数量的行，只要您正确重复类并在每个 div.line 和以下 之间添加间隔符 div code>div.tag.

演示:http://jsfiddle.net/SQ39f/10/