html - 在多行文字周围制作矩形边框

我有一个这样的html标签：

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

我当然希望文本在一个盒子中，但是会像在多行中那样折叠。就像here。

我在哪里犯错？我该如何解决？

最佳答案

没错：b是自然的内联元素。如果将边界应用于内联元素，则实现的结果是将边界应用于所有行

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

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

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

结果

或者，如果您只需要概述文本，则使用outline属性

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