文本选择闪烁

Question

如何使文本选择平滑的地方div布局在以下格式http://jsfiddle.net/SQ39f/2/。你可以看到，在选择过程中，选择突出显示跳到顶部并闪烁。尝试选择文本"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弥合左和右div之间的差距，使它们接触，但不重叠。不需要充满不间断空格的div，因此我将其display设置为none。如果可以，完全删除该元素。

通过在第一个"line"div和"second"div之间添加div来防止第二行跳转到第一行。这就像行与行之间的间隔符，所以当选择跳转到之前的div时，您不会看到任何图形变化。

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

只要正确地重复这些类，并在每个div.line和下面的div.tag之间添加间隔符div，该方法应该适用于任何行数。

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

Answer 2

要扩展我关于扩展div以消除间距的评论，这里有一些css可以添加到您的示例页面中。

设置div的宽度以覆盖左右两列之间的间隙。我已经将边框、边距和内边距归零，并设置行高，使其看起来整洁:

div { border: 0; margin: 0; padding: 0; line-height: 18px; }
div div { width: 81px; height: 18px; }

小提琴:http://jsfiddle.net/SQ39f/18/

如果你事先知道文本是什么样子的(例如，如果你有一个结果表)，这是最简单的选择。

如果行没有统一布局，您可以使用javascript计算div的适当宽度——遍历左边的div，从下一个兄弟的位置减去"左"位置。这很容易用JQuery实现。

Answer 3

您必须将绝对定位替换为相对定位。我使用下面的jQuery实现了这一点，但如果有必要，也可以直接用javascript完成。

$(document).ready(function() {
    $('div[style*="position"]').each(function() {
        var $this = $(this);
        if ($this.css('position') === 'absolute') {
            var offset = $this.offset();
            $this.css('position', 'relative');
            $this.offset(offset);
        }
    });
});

在这里工作:http://jsfiddle.net/k24p90jh/1/

Answer 4

试试这个解决方案JSFiddle链接

<table>
    <tr>
        <td>FIRST</td>
        <td>LINE</td>
    </tr>
    <tr>
        <td>SECOND</td>
        <td>LINE</td>
    </tr>
</table>

它呈现/显示相同的方式，只是不同的代码，并修复你的突出显示问题。表格就像普通的div标签，只是要确保没有边框(border="0")。希望对您有所帮助=)

Answer 5

首先你需要摆脱position: absolute来改善选择，无论如何我猜这是不可能的?在这种情况下，我想到的唯一解决方案是在下一部分文本之间创建白色填充'  '

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