Question

随后的代码：

<span>Label1 Label2</span>
<span style="float:left"><span>Value</span></span>

双击＆＃34;值＆＃34;单词，Label2被选中（高位）但不是Label1。为什么会这样？

我该怎样做才能只选择＆＃34;价值＆＃34;单词，没有＆＃34;标签＆＃34;单词？

实例：http://codepen.io/anon/pen/IHDzj

修改：此错误仅存在于Chrome

中

Answer 1

这可能是Chrome问题。因为在Firefox中它工作正常。但是要在chrome中解决它，只需在关闭第一个span标记之前添加空格，如下所示。

<span>Label1 Label2 </span>
<span style="float:left"><span>Value</span></span>

因为每当我们通过双击它来选择文本时。在chrome中选择了单词和空格，这个bug已经在chrome问题中解决了。

Answer 2

我可以确认，我在Chrome中遇到了同样的问题，但在Firefox中却没有。我使用的解决方案是在Value之前添加一个空格，如下所示：

<span>Label1 Label2</span>
<span style="float:left"><span> Value</span></span>

Roshan的解决方案对我不起作用，因为双击Value也会选择Label2之后的空格。

Answer 3

尝试使用属性user-select: none作为标签，以便在点击时不会被选中。此属性是特定于供应商的。

HTML

<span id = "label1">Label1 Label2</span>
<span style="float:left"><span>Value</span></span>

CSS

#label1 {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

DEMO

参考:Stack Overflow Post

详细了解user-select

Answer 4

我的问题可能有所不同，因为我在第二个节点上使用了float：。

.property-title {
  box-sizing: border-box;
  display: inline-block;
}

.property-value {
  display: inline-block;
  float: right;
}

<li data-name="article-number">
  <span class="property-title">Label</span>
  <span class="property-value">Value</span>
</li>

Roshan中的建议解决方案对我不起作用。我最后在第一个节点之后添加了 。

<li data-name="article-number">
  <span class="property-title">Artikelnummer</span>&nbsp;
  <span class="property-value">8C32345</span>
</li>

双击HTML中的文本选择与浮动

4 个答案: