11

考虑以下 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在单行上渲染，则边框相当于设置了一个CSS样式的border: 1px solid black；
  • 如果跨度在多条线上呈现，则边界将围绕跨度的最外边缘绘制，而不是在它穿过的线之间。这相当于在 span 上设置 CSS 背景颜色，并在高亮区域的边缘绘制线条。

我相当有信心这不能单独使用原始 CSS 完成（在第二种情况下）。涉及 javascript 库或特定于 Firefox 的解决方案是可以接受的。

这是第二种情况的模型：

场景二模拟

4

1 回答 1

13

考虑添加大纲，而不是边框​​ 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>

于 2012-12-04T15:26:12.227 回答