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>
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>​<span>Pear</span>
<br/>
<br/>
<span>Lemon2</span><i style="font-size:0;"> </i><span>Pear2</span>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With