how to outline a long span tag?

css, html, javascript, svg

Solution

Like so:

CSS:

p {
    width: 220px;
}

span {
    outline: 2px red solid;
}

So you have the span around what you want, just put `outline` on it and done. Pretty simple uh? :D

DEMO HERE

Note: As pointed out in the comments, this doesn't seem to work in Firefox. Looking into a solution now.

Problem

a outline box as below is needed: The HTML code is: ``` <p>We <span>prefer questions that can be answered, not</span> just discussed.</p> ``` It is difficult to get the coordinate of the left-top point and right-bottom point of the outline box. using: ``` outline: 2px red solid; ``` can only work in chrome, but failed in firefox. And also failed in chrome while the line-height of `<p>` is 300%.

Original source

Related problems