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

Posted 2023-03-06

【中文标题】内联块内的文本选择，中间没有空格

【英文标题】：Text selection inside inline-blocks without space between

【发布时间】：2017-09-27 04:00:15

【问题描述】：

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

【问题讨论】：

我找到了一个“混乱”的解决方案，在每两个跨度之间放置一个这样的跨度就可以了：<span style="max-width: 0px;min-width: 0px;"> </span>

浮点数是不可能的？

@zgood 我不想使用它们

【参考方案1】：

您可以使用Zero-width space 代替普通空格：

编辑：..或带有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>

【讨论】：

看起来还不错。但是，如果用户决定同时选择两个跨度，那么不可见的空间也会被复制，并且可能会在其他地方产生问题。

确实如此。您的“凌乱”解决方案的较短版本是在元素之间添加一个带有font-size: 0 的空格。我已经更新了我的示例代码。

【参考方案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>

【讨论】：

不太好，因为单击一次会破坏正常行为。