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>

我想在 span 周围画一个最小的边框。

即：

• 如果 span 在单行上呈现，边框等同于设置 CSS 样式 border: 1px solid black；
• 如果 span 跨越多行呈现，边框会绘制在 span 的最外边缘，而不是跨越其所遇到的每一行之间。这相当于在 span 上设置 CSS 背景颜色，并在突出显示区域的边缘绘制线条。

我相当自信无法仅使用纯 CSS 来完成这项任务（第二种情况）。涉及 JavaScript 库或仅限于 Firefox 的解决方案可接受。

这是第二种情况应该如何看起来的模拟：

- David North

---

您能上传一张示例截图，展示这两种情况应该是什么样子吗？ - Sajjan Sarkar

Answer 1

考虑添加轮廓而非边框。http://jsfiddle.net/tarabyte/z9THQ/

span {
  outline: 2px solid black;   
}

Firefox 在行之间绘制轮廓线。 有一个解决方法：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>

- Yury Tarabanko

---

不知道原来这么简单。+1 - Matanya

这并没有解决第二种情况，因为它在跨度内绘制文本的连续行之间画了一条线（请参见上面添加的插图）。 - David North

好的，虽然有点凌乱，但它在纯CSS中实现了正确的功能，所以答案被接受了！ - David North