Selecting text within inline blocks with no spaces in between
I have a problem with text selection in Chrome. I have two inline-block style spans (same happens with div). When I try to double-click the text inside one of the boxes, all adjacent boxes will be selected.
This can be solved by putting at least one space or newline between blocks. But this space will become visible and break the layout.
Demo (in Chrome 58):
Firefox works fine for both cases.
How can I solve it without making a mess of the markup?
Source:
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>
+3
source to share
2 answers
Instead of regular space, you can use zero-width space :
Edit : .. or element with font-size: 0
containing 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>
+4
source to share
I think I got it ...
try adding this:
user-select: all;
so it will be:
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>
+1
source to share