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

3gtaxfhh 于 2023-01-14 发布在其他

关注(0)|答案(3)|浏览(151)

我在Chrome中的文本选择有问题。我有两个span样式为inline-blocks（div也是如此）。当我试图双击其中一个blocks中的文本时，所有相邻的blocks都被选中。
这可以通过在块之间放置至少一个空格或换行符来解决。但是这个空格会变得可见，并会破坏布局。
演示（在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>

css

来源：https://stackoverflow.com/questions/43690276/text-selection-inside-inline-blocks-without-space-between

3条答案

按热度按时间

rekjcdws1#

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

- Edit**：..或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>

赞(0）回复(0）举报 2023-01-14

rqenqsqc2#

我想我找到了...
尝试添加以下内容：
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>

赞(0）回复(0）举报 2023-01-14

vwkv1x7d3#

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

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

赞(0）回复(0）举报 2023-01-14

我来回答

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

3条答案

相关问题

热门标签

最新问答