Pregunta La selección de texto del usuario en el elemento flotante en Chrome (webkit) selecciona más texto


Al hacer doble clic en el texto de la etiqueta gris (tiene flotante: derecha), cromo (webkit) también selecciona texto al principio de la línea (tiene flotante: izquierda). ¿Hay alguna forma de contrarrestar esto sin agregar un marcado adicional o cambiar el orden de la fuente de la etiqueta?

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


11
2018-04-04 10:58


origen


Respuestas:


En primer lugar, solo para demostrar el problema:

Tenemos dos adyacentes div elementos: cada uno tiene contenido y no hay espacios en blanco entre ellos en el marcado.

Al seleccionar el contenido de una de ellas haciendo doble clic, solo se selecciona el contenido de la div seleccionada.

Sin embargo, cuando el divs están flotando con CSS y uno de los divs se selecciona como se indica anteriormente: Chrome selecciona los contenidos de AMBOS 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>

No sé por qué Chrome maneja los elementos flotantes de esta manera, y probablemente sea un error, pero en lo que respecta a su pregunta:

¿Hay alguna manera de contrarrestar esto sin agregar marcas adicionales o   cambiando el orden de la fuente de la etiqueta?

Como solución, puede establecer display:flex en el elemento contenedor de los flotadores, que haría que la declaración de flotación en los artículos flexibles sea redundante porque los flotadores no se aplican a los artículos flexibles, consulte la especificación

flotar y despejar no crean flotación o despeje del elemento flexible, y   no lo saque fuera de flujo.

Además, podemos usar algunas propiedades de flexbox para que los divs tengan el mismo aspecto que cuando flotaron:

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


4
2017-08-17 12:31



Esto se debe a que no tiene espacio en blanco (u otros caracteres que terminan las palabras) que separa los dos spans. Si tuviera un párrafo que contiene los que no tienen espacios en blanco u otros símbolos relevantes para finalizar la palabra, esperaría que la selección los incluyera. En el nivel de texto, su contenido aquí es toda una palabra ("123456789Algunas"). Toma el siguiente ejemplo:

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

Se convierte en: Abcdef

Incluso si tuviera que diseñar el primer tramo para que parezca trillones de píxeles del segundo, los dos elementos se clasificarán como una sola palabra.


3
2018-04-04 11:12



El problema es debido al espacio en el contenedor. Debe haber un espacio para separar las palabras (ya sea dentro del contenedor o afuera). Entonces, después de probar diferentes opciones posibles, encontré lo siguiente (corríjanme si estoy equivocado)

  1. Si esto es Block contenedor de elementos se colocará en dos líneas en navegador no requiere espacio lo que nunca.
  2. Si es cualquiera inline o inline-block entonces el contenido será colocado en una sola línea en el navegador, así que tenemos que dar explícitamente el espacio entre dos contenedores o entre los contenedores.

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


1
2017-08-23 10:43