考虑以下 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 的解决方案可接受。
这是第二种情况应该如何看起来的模拟: