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):

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>

2 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> </i><span>Pear2</span>

I think I got it....

try adding this:

user-select: all;

so it would be this:

span { outline: 1px solid red; display: inline-block; min-width: 70px; user-select: all; }

<span>Apple</span><span>Orange</span> <br/> <br/> <span>Lemon</span> <span>Pear</span>