Search code examples
html

Text selection on double click in HTML with a float

With the subsequent code :

<span>Label1 Label2</span>
<span style="float:left"><span>Value</span></span>

when double-clicking on the "Value" word, Label2 is selected (highlited) but not Label1. Why is this the case ?

What can I do to select only the "Value" word and none of the "Label" words ?

Live example: http://codepen.io/anon/pen/IHDzj

Edit: this bug only exists in Chrome

Solution

  • This is possibly the Chrome issue. Because in Firefox it works fine. However to solve it in chrome just add space before closing of first span tag as shown here.

    <span>Label1 Label2 </span>
<span style="float:left"><span>Value</span></span>

    Because whenever we select a text by doubleclicking it.The word as well as white space got selected in chrome and this bug has already fired in chromium issue.