html - 在多行文本周围制作一个矩形边框

Question

我有一个这样的 html 标签:

<pre>
  <b style="border: 1px dotted #999;">      Expected true to be false.
      here some content.
</b>
</pre>

我希望文本在一个框中，当然是这样，但它在多行中折叠。像here .

我哪里出错了？我该如何解决这个问题？

Answer 1

没有错:b 是一个自然的内联元素。如果您将边框应用于内联元素，您获得的结果是将边框应用于每一行

您可以更改其显示属性，例如使用 display: inline-block;

<b style="border: 1px dotted #999; display: inline-block">

示例:http://jsfiddle.net/5s3vxbv3/

结果

---

或者，如果您只需要勾勒文本轮廓，则使用outline 属性

<b style="outline: 1px dotted #999;">

示例:http://jsfiddle.net/5xc5ef1x/

结果