在多行文本周围创建一个矩形边框

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/

结果

Answer 2

http://jsfiddle.net/swapnilmotewar/5xc5ef1x/2/You也可以这样做。

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

js fiddle：http://jsfiddle.net/swapnilmotewar/5xc5ef1x/2/