HTML/CSS Come evitare l'evidenziazione del testo dall'intera larghezza della pagina in google chrome

Question

Fondamentalmente quando utilizzo Google Chrome e evidenziamo il testo su alcuni siti Web, l'evidenziazione si estende su tutta la larghezza del browser anziché solo evidenziare il testo. In che modo è possibile regolare i CSS in modo che, quando si evidenzia il testo, vengano evidenziate solo le parole anziché l'intera pagina. Un buon esempio da guardare è http://guides.rubyonrails.org/getting_started.html. Prova a evidenziare il testo non di codice in Google Chrome e puoi vedere di cosa sto parlando.

Answer 1

La parte OCD mi ha chiesto anche questo: l'unica cosa che ho notato (anche se questo non è affatto una soluzione completa) è che galleggiava gli elementi mostrano il comportamento che stai cercando. This Fiddle mostra una versione live (schermata di seguito) in cui i due divs sono identici, tranne che è presente la dichiarazione float: left;, che impedisce l'evidenziazione del testo dall'intera pagina.

Se si tratta di un problema abbastanza grande per te (anche se direi diversamente), potresti far fluttuare il contenitore principale per assicurarti che l'evidenziazione del testo sia vincolata. La "soluzione" di Solendil sembra essere massicciamente esagerata, introducendo un enorme difetto di usabilità (il fastidio di non essere in grado di selezionare il testo) per il minor disturbo visivo.

Aggiornamento: come da @ di AndreZS risposta, aggiungendo un valore position diverso da quello predefinito static limita anche il testo evidenziando a quell'elemento (credo che questo comportamento è cambiato negli anni successivi la mia risposta originale). Ci vorrebbe qualcuno che abbia familiarità con WebKit per spiegare cosa sta succedendo esattamente per attivare il comportamento desiderato: sembra che abbia a che fare con il layout di un elemento e come viene disegnato.

Answer 2

Non è possibile modificare il machanism dell'algoritmo di evidenziazione. L'evidenziazione si estende attraverso paddings e margini, che a volte è fastidioso. Che cosa si potrebbe fare è prevenire ogni selezione del testo con i CSS

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

Answer 3

Nel file .css utilizzare position: relative; nella sezione div che conterrà il testo.

Answer 4

.content{ 
    display:inline-block; 
} 

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

La soluzione CherryFlavourPez, utilizzando galleggiante, porterebbe ad ulteriori complicazioni come il contenitore non si estendono secondo la div galleggiante all'interno.