Question

Basically when I use Google chrome and highlight text on some websites, the highlight spans the entire width of the browser rather than just highlighting the text. How can CSS be adjusted to make it so that when you highlight text, it only highlights the words rather than span across the entire page as well. A good example to look at is http://guides.rubyonrails.org/getting_started.html. Try highlighting non-code text in Google chrome and you can see what I am talking about.

Answer 1

The OCD part of me has wondered this as well: the only thing I’ve noticed (though this is by no means a comprehensive solution) is that floated elements exhibit the behaviour you’re after. This Fiddle shows a live version (screenshot below) whereby the two divs are identical save that one has the declaration float: left;, which prevents text highlighting from spanning the entire page.

If it’s a big enough issue for you (though I’d say otherwise), you could float your main container to ensure that text highlighting is constrained to it. @solendil’s “solution” seems to be massive overkill, introducing a huge usability flaw (how annoying to not be able to select text) for the sake of a minor visual annoyance.

Update: as per @AndreZS’s answer, adding a position value other than the default static also restricts the text highlighting to that element (I think this behaviour has changed in the years since my original answer). It would take someone familiar with WebKit to explain what exactly is going on to trigger the desired behaviour: seems like something to do with the layout of an element and how it is being drawn.