jquery - 在内联元素的每一行上填充

Question

我有一个 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;
}

在此代码笔中，“Lorem”和“consectetur”之前以及“amet”和“elit”之后

http://codepen.io/anon/pen/rVxYbL

Answer 1

可以通过添加box-shadow来实现:

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

DEMO

您可以在本文中找到更多信息 css-tricks