Jquery 内联元素每行上的填充

我有一个h3元素宽度，背景色在两行上断开。我希望它的行与行之间有一些空间，因此我通过将元素显示为内联并为其提供比字体大小更高的行高来实现这一点。现在我想知道是否有任何方法可以在每行的第一个单词之前和最后一个单词之后获得一些填充

<div class="wrapper">
<h3>Lorem ipsum dolor sit amet consectetur adipiscing elit<h3>
</div>

.wrapper{
   width: 500px;
}

h3{
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
}

我的同僚们，我的同僚们
.包装纸{
宽度：500px；
}
h3{
字体大小：40px；
背景：#000；
颜色：#fff；
线高：54px；
显示：内联；
}

在这个代码笔中，在“Lorem”和“Concertetur”之前，在“amet”和“Elite”之后

添加另一个div

<div class="wrapper">
  <div>
      <h3>Lorem ipsum dolor sit amet consectetur adipiscing elit<h3>
  </div>
</div>

<style>
.wrapper{
  width: 500px;
  padding-left: 10px;
  padding-right: 10px;
}
</style>

我的同僚们，我的同僚们
.包装纸{
宽度：500px；
左侧填充：10px；
右边填充：10px；
}

---

---

或者您也可以使用

填充：0px 10px 0px 10px
您可以通过添加
框阴影来实现：

h3 {
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
  box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}


这是一个棘手的问题，多年来一直困扰着开发人员。本文介绍了一些您可以尝试的技巧

我发现对我自己特别有用的一个方法是使用框阴影来模拟填充。在您的情况下，您可以尝试以下方法：


.wrapper{
宽度：500px；
填充：0 10px；
}
h3{
字体大小：40px；
背景：#000；
颜色：#fff；
线高：54px；
显示：内联；
盒影：10px0#000，-10px0#000；
}

我的同僚们，我的同僚们
只会在第一个和最后一个单词（Lorem和Elit）上给我填充。我想在每一行上都加上…只会在第一个和最后一个单词上加上填充（Lorem和Elit）。我想在每一行上都写上。谢谢你的回答-它很有魅力，但因为马什是第一个，所以我接受了他的回答。。但非常感谢：）
h3 {
  font-size: 40px;
  background: #000;
  color: #fff;
  line-height: 54px;
  display: inline;
  box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}