CODEWITHSUNDEEP
htmlcss
Matt Hancock
Matt Hancock

Reputation: 4039

Confining text highlighting to <pre> block

This must be a duplicate, but I can't seem to find the right keywords to search for. How do I confine text-highlighting (via the cursor) to a particular html element? For instance, I have a <pre></pre> block marked up using prettyprint. Specifically, my highlights spill out the element like so:

yoyoyo

where the highlight selection should stick to the element of interest (element where the selection began). This isn't a problem in firefox, but is in safari and chrome. Strangely the stackoverflow preview seems to have this functionality despite working in chrome at the present so it must be possible. I couldn't find the right fix by digging through their CSS.

Any ideas?

Upvotes: 1

Views: 51

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241208

Just relatively position the element.

Example Here - try highlighting the text after removing position:relative.

pre {
    position:relative; /* Add this.. */
    background:rgb(216, 216, 216);
    word-break:break-word;
    margin:10px 50px;
}

Upvotes: 2

Related Questions