Выбор текста пользователя в плавающем элементе в Chrome (webkit) выбирает больше текста

Ответ 1

Прежде всего, чтобы продемонстрировать проблему:

У нас есть два смежных элемента div - каждый из них имеет контент, а между ними в разметке нет пробелов.

При выборе содержимого одного из них двойным щелчком - выбирается только содержимое выбранного элемента.

Однако, когда div плавают с CSS и один из divs выбран как указано выше, Chrome выбирает содержимое BOTH div

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

Ответ 2

Это потому, что у вас нет белых пробелов (или других слов, заканчивающихся словами), разделяющих два spans. Если у вас есть абзац, содержащий те, у кого нет белых пробелов или других соответствующих символов, заканчивающихся словами, вы ожидаете, что выбор будет включать их. На текстовом уровне ваш контент здесь - все одно слово ( "123456789Some" ). Возьмем следующий пример:

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

Становится: Abcdef

Даже если вы хотите, чтобы первый диапазон отображал триллионы пикселей от второго, эти два элемента по-прежнему будут считаться одним словом.

Ответ 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>