文字选择闪烁

Question

如何使用以下格式http://jsfiddle.net/SQ39f/2/对div的布局进行平滑的文本选择.您可以看到,在选择过程中,选择突出显示跳转到顶部并闪烁.尝试选择文字"SECOND LINE"而不是我没有控制位置,左侧和顶部样式属性,因为它们是由第三方设置的.我可以添加其他样式.

<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桥接左右divs 之间的间隙,使它们接触,但不要重叠.在div全非换空间是不需要的,所以我把它display给none.如果可以,请完全删除该元素.

通过div在第一个"LINE" div和"SECOND" 之间添加a来防止选择第二行跳转到第一行div.它充当线之间的间隔,因此当选择跳转到上一个时,div您看不到任何图形更改.

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

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

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