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

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

您可以使用零宽度空格来代替普通空格：

编辑：..或带有

font-size: 0

且包含正常空间的元素。

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>

Answer 2

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

尝试添加这个：

user-select: all;

所以会是这样的：

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>

Answer 3

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 4

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

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