文本选择闪烁 [英] Text selection flickers

问题描述

如何使文字选择顺利进行，格式如下： 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> 
  

解决方案>

这是我想出的：

HTML -

 < div> 
< div class =tagstyle =position：absolute; left：100.178px; top：10.523px;> FIRST< / div& 
< div class =linestyle =position：absolute; left：180.61px; top：10.523px;> LINE< / div> 
< div>< / div> 
< div class =tagstyle =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 =linestyle =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 充满了不间断的空格，因此我将其显示设置为 none 。如果可以，请完全删除该元素。

防止选择第二行跳转到第一行是通过添加 div 在第一个LINE div 和SECOND div 之间。这作为行之间的间隔，因此当选择跳到上一个 div 时，您看不到任何图形变化。

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

此方法应该适用于任何数量的行，只要正确地重复类并在每个<$ c $之间添加 div c> div.line 和以下 div.tag 。

DEMO： a href =http://jsfiddle.net/SQ39f/10/ =nofollow> http://jsfiddle.net/SQ39f/10/

How can I make text selection smooth for the where divs are laid out in the following format http://jsfiddle.net/SQ39f/2/. You can see that during selection process selection highlight jumps to the top and flickers. Try selecting text "SECOND LINE" Also not that I dont have control over position,left and top style properties as they are set by third party .I can just add additional styles.

<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>

解决方案

Here's what I've come up with:

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;
}

Setting height:18px; normalizes the selection height; setting width:81px bridges the gap between the left and right divs just enough so they touch, but do not overlap. The div full of non-breaking spaces is not needed, so I set its display to none. If you can, remove that element entirely.

Preventing selection of the second line from jumping to the first is done by adding a div between the first "LINE" div and the "SECOND" 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 extends the div's box and allows you to drag your cursor further to the right of the text and still maintain selection of that line. I wouldn't advise setting it below 10px, otherwise you may get flickering on the last character of the first line when selecting the second line.

This method should work for any number of lines, so long as you repeat the classes correctly and add in the spacer div between each div.line and the following div.tag.

DEMO: http://jsfiddle.net/SQ39f/10/

这篇关于文本选择闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！