内联块内的文本选择，没有空格

Question

我在Chrome中选择文字时遇到问题。我有两个样式为内联块的跨度（与div相同）。当我尝试双击其中一个块内的文本时，会选择所有相邻块。

可以通过在块之间放置至少一个空格或换行符来解决。但是这个空间将变得可见，并将打破布局。

演示（在Chrome 58中）：

Firefox适用于这两种情况。

如何解决它而不会弄乱标记？

源代码：

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>

Answer 1

您可以使用Zero-width space：

代替普通空间

修改：..或包含正常空格的font-size: 0元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我想我明白了......

尝试添加：

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

所以就是这样：

＆＃13;

＆＃13;

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

＆＃13;

var button = document.querySelector('button'),
    audio = null;

button.addEventListener('click', handler, false);

function handler() {
  audio = new Audio('https://www.gnu.org/music/FreeSWSong.ogg');
  audio.play();
}

＆＃13;

＆＃13;

＆＃13;