CSS/Javascript:如何在内联元素周围绘制最小边框？

Question

请考虑以下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>

我想画一个跨度的最小边框.

那是:

• 如果跨度渲染在一行上,则边框相当于设置边框的CSS样式:1px solid black;
• 如果跨度在多条线上渲染,则边框将围绕跨度的最外边缘绘制,而不是在跨越的线之间绘制.这相当于在跨度上设置CSS背景颜色,并在突出显示区域的边缘周围绘制线条.

我相信单独使用原始CSS无法做到这一点(在第二种情况下).涉及javascript库的解决方案或特定于Firefox的解决方案是可以接受的.

这是第二个场景应该如何看的模型:

Answer 1

考虑添加一个大纲,而不是边框http://jsfiddle.net/tarabyte/z9THQ/

span {
  outline: 2px solid black;   
}

Firefox在行之间绘制轮廓.有一个工作方式:http://jsfiddle.net/z9THQ/2/

HTML:

.wrapped {
   outline: 2px solid black;
}

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

和CSS:

<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>