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

问题描述

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

我想在这个范围内画一个最小的边框。

I would like to draw a minimal border round the span.

也就是：

• 如果跨度在一行上渲染，边框相当于设置CSS样式


• 如果跨度在多行上呈现，则边框将在跨度的最外边缘绘制，而不是在跨越的行之间绘制。这等同于在跨度上设置CSS背景颜色，并在突出显示的区域边缘绘制线条。

相当自信这不能用原始CSS单独（在第二种情况下）。

I am fairly confident this cannot be done with raw CSS alone (in the second case). Solutions involving javascript libraries, or those which are Firefox-specific, are acceptable.

这是第二个场景应该如何显示的模型：

This is a mock-up of how the second scenario should look:

推荐答案

考虑添加大纲，而不是边框​​

Consider adding an outline, not border http://jsfiddle.net/tarabyte/z9THQ/

span {
  outline: 2px solid black;
}

Firefox在行之间绘制轮廓。有一个工作：

Firefox draws outline between lines. There is a 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;
}

这篇关于CSS / Javascript：如何在内联元素周围绘制最小边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！