如何在文本周围添加背景，但在行之间有空格？

Question

我试图让文字有背景色，但在两行之间有空白区域。我设法让它主要在Firefox和资源管理器中工作，但Safari和Chrome之间没有空间。这是

的样子

火狐：

但是这里有Chrome浏览器的外观：

为了使它在Firefox和IE中工作，我不得不在H2标签内的文本周围添加一个跨度，在该跨度中应用背景，并在其中添加第二个跨度，我将其放置在相对位置以便我可以放下文本向下将其垂直居中于背景颜色中。

HTML：

<h2><span class="h2inner"><span class="h2inner2">Conflict of Interest Policy of A Better City, Inc.</span></span></h2>

CSS：

.h2inner {
padding: 4px 0 3px 0;
background-color: $h2color; }
.h2inner2 {
position: relative;
top:5px;}

理想情况下，我也喜欢在每行的颜色块的开头和结尾填充，但我只能在整个头部的开始和结束处填充，而不是在中间的地方填充它突破了一条新线。

有什么想法吗？

Answer 1

您可以调整line-height行间距以及可以使用white-space: pre-wrap的每一行的左右填充以及left位置的一个内跨

＆＃13;

＆＃13;

h2 {
  width: 400px;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  line-height: 1.3em;
}
span {
  background-color: #F07317;
  white-space: pre-wrap;
  padding-right: 10px;
}
span span {
  position: relative;
  left: 10px;
}

＆＃13;

<h2><span><span>Conflict of Interest Policy of A Better City, Inc.</span></span></h2>

＆＃13;

＆＃13;

＆＃13;