HTML/CSS Cómo evitar que el texto resalte abarca todo el ancho de la página en google chrome

Question

Básicamente cuando uso Google Chrome y resalto el texto en algunos sitios web, el resaltado abarca todo el ancho del navegador en lugar de resaltar el texto. ¿Cómo se puede ajustar CSS para que cuando destaque el texto, solo resalte las palabras en lugar de abarcar toda la página también? Un buen ejemplo para mirar es http://guides.rubyonrails.org/getting_started.html. Intenta resaltar el texto sin código en Google Chrome y podrás ver de lo que estoy hablando.

Answer 1

La parte de TOC me ha preguntado esto también: la única cosa que he notado (aunque esto no es en absoluto una solución completa) es que flotaba los elementos exhiben el comportamiento que buscas. This Fiddle muestra una versión en vivo (captura de pantalla a continuación) donde los dos divs son idénticos salvo que uno tiene la declaración float: left;, que evita que el resaltado de texto abarque toda la página.

Si es un problema lo suficientemente grande para usted (aunque diría lo contrario), podría flotar su contenedor principal para asegurarse de que el texto resaltado está limitado a él. La "solución" de @solendil parece ser un exceso masivo, presentando un gran defecto de usabilidad (qué molesto es no poder seleccionar texto) por una pequeña molestia visual.

actualización: según la respuesta de @ AndreZS, añadiendo un valor position distinta de la predeterminada static también restringe el texto destacando a ese elemento (creo que este comportamiento ha cambiado en los últimos años ya que mi respuesta original) Sería necesario que alguien familiarizado con WebKit explicara qué está sucediendo exactamente para activar el comportamiento deseado: parece tener algo que ver con el diseño de un elemento y cómo se dibuja.

Answer 2

No se puede modificar el mecanismo del algoritmo de resaltado. El punto culminante se extiende a través de los rellenos y los márgenes, lo que a veces es molesto. Lo que podría hacer es evitar cualquier selección de texto con CSS

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none; 

Answer 3

En su archivo .css, use position: relative; en la sección div que contendrá su texto.

Answer 4

.content{ 
    display:inline-block; 
} 

http://jsfiddle.net/V7ahp/4/

La solución por CherryFlavourPez, utilizando flotador, daría lugar a la complicación adicional como el recipiente no se estira según la div flotador interior.