html - Chrome (webkit) のフローティング要素でユーザーがテキストを選択すると、より多くのテキストが選択されます

Question

灰色のラベル (float: 右) のテキストをダブルクリックすると、chrome (webkit) は行頭のテキストも選択します (float: 左)。余分なマークアップを追加したり、ラベル ソースの順序を変更したりせずに、これに対抗する方法はありますか?

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

Answer 1

これは、2 つのspans. 空白やその他の関連する語末記号のない段落を含む段落がある場合、選択範囲にそれらが含まれることが期待されます。テキスト レベルでは、ここのコンテンツはすべて 1 つの単語 (「123456789Some」) です。次の例を見てください。

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

なる: Abcdef

最初のスパンが 2 番目のスパンから数兆ピクセル離れて表示されるようにスタイルを設定したとしても、2 つの要素は 1 つの単語として分類されます。

Answer 2

問題は、コンテナ内のスペースが原因です。単語間 (コンテナーの内側または外側) を区切るためのスペースが必要です。したがって、さまざまな可能なオプションを試した後、次のことがわかりました（間違っている場合は修正してください）

1. 要素コンテナの場合Blockは、ブラウザーに 2 行で配置され、間隔は必要ありません。
2. inlineまたはの場合inline-block、コンテンツはブラウザーで 1 行に配置されるため、2 つのコンテナー内またはコンテナー間にスペースを明示的に指定する必要があります。

.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>