带有浮点数的HTML中双击文本选择答案

【问题标题】：Text selection on double click in HTML with a float带有浮点数的HTML中双击文本选择
【发布时间】：2014-10-01 15:47:26
【问题描述】：

加上后面的代码：

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

当双击“值”字时，Label2 被选中（突出显示）但不是 Label1。为什么会这样？

我该怎么做才能只选择“值”字而不选择“标签”字？

现场示例：http://codepen.io/anon/pen/IHDzj

编辑：此错误仅存在于 Chrome 中

【问题讨论】：

标签： html

【解决方案1】：

这可能是 Chrome 的问题。因为在 Firefox 中它运行良好。但是，要在 chrome 中解决它，只需在关闭第一个 span 标签之前添加空格，如下所示。

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

因为每当我们通过双击选择文本时。在 chrome 中选择了单词和空格，并且这个 bug 已经在 chromium 问题中触发了。

【讨论】：

我将使用它，因为我还需要选择我的标签。谢谢。

【解决方案2】：

尝试为标签使用属性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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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 建议的解决方案对我不起作用。我最终在第一个节点之后添加了&nbsp;。

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

【讨论】：