Chrome（webkit）中浮动元素中的用户文本选择选择更多文本[关闭]答案

【问题标题】：User text selection in floating element in Chrome (webkit) selects more text [closed]Chrome（webkit）中浮动元素中的用户文本选择选择更多文本[关闭]
【发布时间】：2013-03-26 09:52:07
【问题描述】：

当双击灰色标签中的文本（有浮动：右）时，chrome（webkit）也会选择行首的文本（有浮动：左）。有没有办法在不添加额外标记或更改标签源顺序的情况下解决这个问题？

http://codepen.io/lezz/pen/xBAzr

【问题讨论】：

标签： html css css-float textselection

【解决方案1】：

这是因为您没有空格（或其他单词结尾字符）分隔两个 spans。如果您的段落包含没有空格或其他相关词尾符号的段落，则您希望选择包含它们。在文本级别，您的内容都是一个单词（“123456789Some”）。举个例子：

<span>Abc</span><span>def</span>

变成：Abcdef

即使您将第一个跨度设置为与第二个跨度相距数万亿像素，这两个元素仍将被归类为一个单词。

【讨论】：

如果是这种情况，将标记从 span 更改为 div 时问题将得到解决，但问题仍然存在。

【解决方案2】：

首先只是为了演示问题：

我们有两个相邻的 div 元素 - 每个都有内容，并且在标记中它们之间没有空格。

当通过双击选择其中一个的内容时 - 仅选择单击的 div 的内容。

但是，当divs 使用 CSS 浮动并且如上所述选择了其中一个 div 时 - Chrome 会选择 BOTH divs 的内容

.rfloat {
  float: right;
}

.lfloat {
  float: left;
}

<h2>Non-floated elements: Double click selects each div separately</h2>

<div>Abc</div><div>def</div>

<hr>
<h2>(On Chrome:) Floated elements: Double click selects BOTH divs</h2>
<div class="rfloat">Abc</div><div class="lfloat">def</div>

我不知道为什么 Chrome 会以这种方式处理浮动元素 - 这可能是一个错误，但就您的问题而言：

有什么办法可以在不添加额外标记或更改标签源顺序？

作为一种解决方法，您可以在浮动的容器元素上设置 display:flex - 这会使弹性项目上的浮动声明变得多余，因为浮动不适用于弹性项目 - 请参阅 the spec

float 和 clear 不会创建弹性项目的浮动或清除，并且不要让它失控。

此外，我们可以使用一些 flexbox 属性来设置 div 的样式，使其看起来与浮动时相同：

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.rfloat {
  float: right;
}

.lfloat {
  float: left;
}

<h2>Workaround: Set container with display:flex</h2>
<div class="container">
  <div class="rfloat">Abc</div>
  <div class="lfloat">def</div>
</div>

【讨论】：

你把问题复杂化了。问题很简单，这两个元素在代码中相互接触（中间没有空格）。当显示为inline 或inline-block 或从正常流上下文中取出时（即浮动时），这两个元素被视为一个扩展的文本，因此当您双击选择文本时，它会选择两个元素。您的 flex 解决方案之所以有效，是因为它使元素表现得像块元素而不是内联元素 - 它们是它们自己独立的实体，不被视为同一结构的一部分。
至于这是否是一个错误：我会说不是。如果您要使用以下标记来显示带有粗体“t”字符的单词“potato”，您仍然希望双击以选择整个单词：po<b>t</b>ato。但是，如果此 <b> 元素显示为块而不是内联，您将不再期望它选择整个单词。
...当然，这并不是说您的答案不正确。它确实解决了这个问题，所以+1。我上面的 cmets 仅与您答案的前半部分有关。
@JamesDonnelly 虽然我同意你的说法，但 OP 想要一个不更改标记的解决方案 - 所以添加空格不是一种选择。

【解决方案3】：

问题在于容器中的间距。单词之间应该有一个空格（容器内部或外部）。所以在尝试了不同的可能选项后，我发现了以下内容（如果我错了，请纠正我）

如果是Block元素容器的会放在两行浏览器不需要任何间距。
如果是inline 或inline-block 则内容为放置在浏览器中的单行中，因此我们必须明确给出两个容器内或容器之间的间距。

.rfloat {
  float: right;
}

.lfloat {
  float: left;
}
.block{
  display: inline-block;
}

<h2>floated elements with space: Double click selects each div separately</h2>
<div class="rfloat"> Abc</div><div class="lfloat"> def</div>
<br>
<hr>

<h2>floated elements without space: Double click BOTH divs</h2>
<div class="rfloat">Abc</div><div class="lfloat">def</div>
<br>
<hr>

<h2>Non-Floated elements with space: Double click selects each div separately</h2>
<div class="block"> Abc</div><div class="block"> def</div>
<br>
<hr>

<h2>Non-Floated elements without space: Double click selects BOTH divs</h2>
<div class="block">Abc</div><div class="block">def</div>
<br>
<hr>

<h2>Non-Floated elements without space(divs separated with line break in HTML): Double click selects div separately</h2>
<div class="block">Abc</div>
<div class="block">def</div>

【讨论】：