Text selection on double click in HTML with a float

Question

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

Answer 1

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.

Answer 2

Try using the property user-select: none for the labels so that it wont get selected on clicking.This property is vendor specific.

html

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

css

#label1 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

DEMO

Reference:Stack Overflow Post

Read more on user-select

Answer 3

I can confirm, that I had the same problem in Chrome, but not in Firefox. The solution I used was to add a space before Value like so:

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

The solution by Roshan didn't work for me, because double clicking Value would also select the space after Label2.