考虑以下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无法做到这一点(在第二种情况下)。涉及javascript库或特定于Firefox的解决方案的解决方案是可以接受的。
这是第二个场景应该如何看的模型:
答案 0 :(得分:13)
考虑添加大纲,而不是边框http://jsfiddle.net/tarabyte/z9THQ/
span {
outline: 2px solid black;
}
Firefox在行之间绘制轮廓。有一个工作方式: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;
}