如何将段落背景颜色设置为与文本相同的宽度？

Question

如何将段落背景颜色设置为与文本相同的宽度？

我的意思是，这个：

<div><p style="background:skyblue">What a background</p></div>

我有这个：

但我想要这个：

我已经检查了this和this类似的帖子，但不适用于我，因为在我的情况下，我只是将这个段落放在div中。

Answer 1

诀窍是将有问题的元素从display: block（<p>的默认设置）转换为display: inline-block：

p {
  background: skyblue;
}

.tight-background {
  display: inline-block;
}

<p>
  Text
</p>
<p class="tight-background">
  Text 2
</p>

希望这有帮助！ ：）