CSS/Javascript: How to draw minimal border around an inline element?

css, firefox, html, javascript

Solution

Consider adding an outline, not border http://jsfiddle.net/tarabyte/z9THQ/

span {
  outline: 2px solid black;   
}

Firefox draws outline between lines. There is a workarond: http://jsfiddle.net/z9THQ/2/

.wrapped {
   outline: 2px solid black;
}

.wrapped span {
    border: 1px solid white;
    background-color: white;
    position: relative;
    z-index: 1000;
}

<p>
   This is a potentially large paragraph of text, which 
      <span class="wrapped"><span> 
        may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal
      </span></span> 
   box round the span
</p>

Problem

Consider the following HTML: ``` <p>This is a potentially large paragraph of text, which <span>may get wrapped onto several lines when displayed in the browser. I would like to be able to draw a minimal</span> box round the span</p> ``` I would like to draw a minimal border round the span. That is: - If the span is rendered on a single line, the border is equivalent to setting a CSS style of border: 1px solid black; - If the span is rendered on multiple lines, the border is drawn around the outermost edges of the span, not between the lines which it crosses. This is equivalent to setting a CSS background color on the span, and drawing the line around the edges of the highlighted area. I am fairly confident this cannot be done with raw CSS alone (in the second case). Solutions involving javascript libraries, or those which are Firefox-specific, are acceptable. This is a mock-up of how the second scenario should look:

Original source