Overflowing select highlight

Question

What is the logic of the selection highlighting overflowing beyond the parent element?

In the attached screenshot, the top one is what I have currently, and the bottom one is a Photoshopped mockup of what I want to achieve.

To me it seems that the selection highlighting is almost largely random; I have not been able to find any definitive resources that explain what makes selection highlighting behave in which ways.

What should I keep in mind in terms of CSS and DOM when wanting to keep the selection highlighting reasonable?

Answer 1

Interestingly, I've wondered why SO doesn't have something like this so it's easier to copy code off an question/answer.

Actually, SO does have contained highlighting in the <code> blocks relying on overflow: auto;. <blockquotes> do not have contained highlighting.

Anyway, it appears there are a few ways to solve this problem (though, I'm sure there might be more). Use one of the following CSS rules to limit the highlighting of text to a specific element.

• overflow: hidden; or overflow:auto;
• position: relative;
• float:left; or float:right;

The working example below shows all four methods at work. Some are easier to work with depending on your needs.

Working Example: http://jsfiddle.net/TFvYu/4/

Sources

• CSS text selection color overflows outside box
• HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome