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的純黑色;
• 如果跨度呈現在多行上，則會在跨度的最外邊緣繪製邊框，而不是在跨越的線條之間繪製邊框。這相當於在跨度上設置CSS背景顏色，並在突出顯示區域的邊緣繪製線條。

我相當有信心，這不能用原始CSS單獨完成（在第二種情況下）。涉及JavaScript庫的解決方案，或者特定於Firefox的解決方案都可以接受。

這是第二個方案應該是什麼樣子實物模型：

Answer 1

考慮增加一個輪廓，而不是邊境http://jsfiddle.net/tarabyte/z9THQ/

span { 
    outline: 2px solid black; 
} 

火狐繪製線條之間的輪廓。有一個workarond：http://jsfiddle.net/z9THQ/2/

HTML：

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

和CSS：

.wrapped { 
    outline: 2px solid black; 
} 

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