Question

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

<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。如果可以，请完全删除该元素。

通过在第一行＆＃34; LINE＆＃34;之间添加div来防止选择第二行跳转到第一行。 div和＆＃34; SECOND＆＃34; div。这充当了行之间的间隔符，因此当选择跳转到上一个div时，您不会看到任何图形更改。

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

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

DEMO：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，减去＆＃39; left＆＃39;从下一个兄弟的位置。使用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

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

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

Answer 5

尝试这种解决方案 JSFiddle Link

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

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

它呈现/显示相同的方式，只是不同的代码，并修复了突出显示的问题.. 表格就像常规div标签一样，只是确保你没有边框（border =＆＃34; 0＆＃34;）。希望这有助于=）

文字选择闪烁

5 个答案: