如何防止网站中笨拙的文本选择行为

Question

I noticed that in some websites, text selection behaves in a somewhat clumsy manner: the user click and hold the left button, and then move it in the direction of the text he/she wants to select, and then an entire portion of text on the opposite side of the movement gets selected.

This is not something that happen everywhere, and it's hard do describe, so I will provide an example. I've found this really cool article . Check the last line of it:

ENV:REDIRECT_STATUS is my new best friend.

If I click on the left of this line, and drag a little to the right (say, up till the : ), I expect to have the ENV: portion of this line selected. Instead, what gets selected is the remainder of this line ( REDIRECT_STATUS is my new best friend. ) plus every comment and the sidebar! I am using Firefox 15.0.1, but already notice this behaviour in Chrome and Internet Explorer.

So what I want to know is, why this happen, and what needs to be done in order to prevent this glitch.

PS: please excuse me for not being clear on this subject; I found this issue really hard to describe on words.

Answer 1

It all has to do with the HTML markup and the CSS. The browsers tend to select the text in the same order as it appears in the HTML. Adding padding like Tim Down suggested can help user select the text because it gives a little margin of error in the text selection.