User text selection in floating element in Chrome (webkit) selects more text [closed]

Question

When double clicking the text in the grey label (has float: right), chrome (webkit) also selects text at the beginning of the line (has float: left). Is there any way to counter this without adding extra markup or changing the label source order?

http://codepen.io/lezz/pen/xBAzr

Answer 1

First of all just to demonstrate the problem:

We have two adjacent div elements - each has content, and there is no whitespace between them in the markup.

When selecting the content of one of them by double-clicking - only the content of the clicked div is selected.

However, when the divs are floated with CSS and one of the divs are selected as above - Chrome selects the contents of BOTH divs

.rfloat {
  float: right;
}

.lfloat {
  float: left;
}

<h2>Non-floated elements: Double click selects each div separately</h2>

<div>Abc</div><div>def</div>

<hr>
<h2>(On Chrome:) Floated elements: Double click selects BOTH divs</h2>
<div class="rfloat">Abc</div><div class="lfloat">def</div>

I don't know why Chrome handles floating elements this way - and it's probably a bug, but as far as your question goes:

Is there any way to counter this without adding extra markup or changing the label source order?

As a workaround you could set display:flex on the container element of the floats - that would make the float declaration on the flex items redundant because floats don't apply to flex items - see the spec

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

Additionally, we can use some flexbox properties to style the divs to look the same as when they were floated:

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.rfloat {
  float: right;
}

.lfloat {
  float: left;
}

<h2>Workaround: Set container with display:flex</h2>
<div class="container">
  <div class="rfloat">Abc</div>
  <div class="lfloat">def</div>
</div>

Answer 2

This is because you have no white-space (or other word-ending characters) separating the two spans. If you had the a paragraph containing those with no white-space or other relevant word-ending symbols you would expect the selection to include them. At text-level, your content here is all one word ("123456789Some"). Take the following example:

<span>Abc</span><span>def</span>

Becomes: Abcdef

Even if you were to style the first span to appear trillions of pixels away from the second, the two elements would still be classed as one word.