Geek Answers Handbook

HTML / CSS How to prevent text from being selected across the entire width of the page in Google Chrome

Basically, when I use Google Chrome and select text on some websites, the highlight covers the entire width of the browser, not just the text. How CSS can be configured so that when highlighting text, it only selects words, and does not cover the entire page. A good example for viewing is http://guides.rubyonrails.org/getting_started.html . Try highlighting text without code in Google Chrome, and you can see what I'm talking about.

+5
source share
4 answers

I also thought about this part of OCD: the only thing I noticed (although this is far from a comprehensive solution) is that the floating-point elements demonstrate the behavior that you are executing. This script shows a live version (screenshot below) in which the two are divsidentical, except that there is an ad float: left;that prevents text from being highlighted from the entire page.

If the problem is big enough for you (although I would say otherwise), you could put your main container to ensure that text selection is limited. @solendil's “solution” seems like a massive overkill, presenting a huge lack of usability (as annoying as not being able to select text) for the sake of slight visual annoyance.

Text highlighting in Chrome

: @AndreZS position, static, ( , , ). -, WebKit, , , : , - , .

+8

.css position: relative; div, .

+6

. , . , CSS

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
+1
.content{
  display:inline-block;
}

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

The CherryFlavourPez solution using float will lead to further complication, as the container will not stretch to fit the inner element of the float.

+1
source

More articles:


All Articles