如何在背景框中包装文字

Question

我正尝试使用CSS将背景颜色包裹在文本周围，如下面的屏幕截图所示

现在这是我所拥有的，但没有给我我真正想要的

h2 {
  color: #fff;
  display: inline;
  background-color: #000;
}

但这就是要得到的

所以有人知道我需要添加什么以使文本被一些填充物包裹吗？

谢谢

Answer 1

您可以使用line-height: 100%;来避免行之间的垂直间隔：

body {
  background: #ddd;
}

p {
  display: inline;
  line-height: 100%;
  background: #fa0;
  font-size: 40px;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

Answer 2

这应该可以帮助您满足您的需求：

body {
  background: #ddd;
}

p {
  background: #e87;
  font-size: 26px;
  line-height: 29px;
  display: inline;
  box-shadow:0.2em 0 0 #e87,-0.2em 0 0 #e87;
  -moz-box-shadow:0.2em 0 0 #e87,-0.2em 0 0 #e87;
  -webkit-box-shadow:0.2em 0 0 #e87,-0.2em 0 0 #e87;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat?</p>