考虑以下 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在单行上渲染,border相当于设置了一个css样式的border: 1px solid black;
- 如果跨度呈现在多行上,则边框绘制在跨度的最外边缘周围,而不是跨度之间。这相当于在 span 上设置 CSS 背景颜色,并在突出显示区域的边缘绘制线条。
我非常有信心这不能单独使用原始 CSS 来完成(在第二种情况下)。涉及 javascript 库或特定于 Firefox 的解决方案是可以接受的。
这是第二种情况的模型:
最佳答案
考虑添加轮廓,而不是边框 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>
关于javascript - CSS/JavaScript : How to draw minimal border around an inline element?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13706091/