Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text selection inside inline-blocks without space between

I have a problem with text selection in Chrome. I have two spans styled as inline-blocks (same happens with divs). When I try to double click text inside one of the blocks all neighbor blocks are selected.

It can be solved by putting at least one space or newline between blocks. But that space will become visible and will break layout.

Demonstration (in Chrome 58):

Double click demo

Firefox works fine for both cases.

How to solve it without making mess out of the markup?

Source code:

span {
  outline: 1px solid red;  
  display: inline-block;
  min-width: 70px;
}
<span>Apple</span><span>Orange</span>
<br/>
<br/>
<span>Lemon</span> <span>Pear</span>
like image 800
Andrej Avatar asked Jan 05 '23 02:01

Andrej


1 Answers

Instead of a normal space, you can use a Zero-width space:

Edit: ..or an element with font-size: 0 containing a normal space.

span {
  outline: 1px solid red;  
  display: inline-block;
  min-width: 70px;
}
<span>Apple</span><span>Orange</span>
<br/>
<br/>
<span>Lemon</span>&#8203;<span>Pear</span>
<br/>
<br/>
<span>Lemon2</span><i style="font-size:0;"> </i><span>Pear2</span>
like image 145
Sphinxxx Avatar answered Jan 08 '23 06:01

Sphinxxx