Search code examples
cssselectionhighlighting

Overflowing select highlight


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?

Select overflow example


Solution

  • 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