0

I just noticed a weird problem. Suppose you have this HTML:

case n° 1: 

<span>123</span><span>456</span>

This is rendered all together:

123456

When you double-click this (I'm using Chrome), the entire 123456 gets selected. If you would add a space between them...

case n° 2: 

<span>123</span> <span>456</span>

You get the texts separate

123 456

And double-clicking selects each of them individually. Now let's remove the space and introduce floats:

case n° 3: 

<span style="float:right">123</span><span>456</span>

This time the texts get rendered separate like this:

456                                 123

However double-clicking either one still selects BOTH elements - I'm guessing because they are still technically next to each other in HTML. Let's put the space back in:

case n° 4: 

<span style="float:right">123</span> <span>456</span>

The result still looks the same...

456                                 123

And - SURPRISE - double clicking either of them still selects both. What gives?

Interestingly, changing <span> to <div> fixes the problem. Playing around more, if at least one element has display: inline or display: inline-block then the strange behavior will be there, and only if both elements have display: block will it work right. In addition, this also applies if instead of float I use position: absolute.

I would like to prevent this weird behavior. Why does it arise and how can I counter it?

Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
Vilx-
  • 104,512
  • 87
  • 279
  • 422

1 Answers1

3

Add an &nbsp; (or &#8203;) instead of a space. This forces the space to render and separate the text into two.

span:first-child
{
  float: right;
}
<span>123</span>&nbsp;<span>456</span>

White space is automatically truncated in HTML, so the regular space is ignored since it theoretically doesn't affect the flow anymore. You can also force it to render by using the CSS white-space property.

span:first-child
{
  float: right;
}

div
{
  white-space: pre;
}
<div><span>123</span> <span>456</span></div>

And finally, if you don't want to see that space, set the font size of the container to 0 and the font size of the spans to whatever you want them to be. (You won't need to do this for the zero-width space &#8203;)

span:first-child
{
  float: right;
}

div
{
  white-space: pre;
  font-size: 0;
}

span
{
  font-size: 16px;
}
<div><span>123</span> <span>456</span></div>
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • Well, that works... But why? – Vilx- Sep 22 '21 at 22:27
  • By floating the first span, the browser will essentially "ignore" the white space preceding the second span. Using an ` ` prevents this. You can see this if you float it to the left instead. Without the ` ` there is no gap between the two spans. With it, there is. – Liftoff Sep 22 '21 at 22:28
  • Hmm, it's still not ideal because the ` ` will appear and affect the flow of the non-floated elements. – Vilx- Sep 22 '21 at 22:32
  • For that, you can set the font size of the container to 0 and the font size of the spans to whatever you want them to be. – Liftoff Sep 22 '21 at 22:33
  • I've added both of these as examples in my answer above. – Liftoff Sep 22 '21 at 22:34
  • Hah, I found a better one! The [zero-width space](https://en.wikipedia.org/wiki/Zero-width_space) works too, and doesn't need any styling tricks at all. – Vilx- Sep 22 '21 at 22:52
  • Yep that works too. – Liftoff Sep 22 '21 at 22:55