Text selection on double click in HTML with a float

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.


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


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.

Tags:

Html

Recent Posts