Html 如何为多行块元素中的单词着色？

我试图实现的是，只有多行标题元素中的文本才有一个带有行间距的背景色

我目前的解决方案是将每个单词都封装在一个范围内，但遗憾的是，它只能在Firefox和Chrome中正常工作

这是我当前的HTML标记：

<div>
  <h3>
    <span>This</span>
    <span>is</span>
    <span>some</span>
    <span>interesting</span>
    <span>Text</span>
    <span>without</span>
    <span>any</span>
    <span>meaning.</span>
  </h3>
</div>

请看一下这个JSFIDLE：

如果你在Opera和Safari中看到这个词，它们之间的间隔很小，而在IE10中，这些词都在一行中

如何在任何浏览器（IE10+）中实现Chrome浏览器的外观

---

非常感谢您，McFarlane将

padding

更改为

margin

span {
    font-size: 14px;
    color: black;
    background: white;
    font-weight: bold;
    margin: 2px 6px 2px 0;
}

---

填充保留背景色边距，而不保留背景色边距。

在跨距中添加边距，以给出它们之间的跨距间距：

margin-right:1px;

---

我认为你需要在每个单词后删除span，将整个文本放在单个span中，并使用单词间距属性，例如

span{word spacing:10px；}

如果你不想删除span，你可以使用边距而不是填充，但IE似乎对添加

display:inline块做出了响应到您的范围定义。
这正是我不想实现的。请参阅我的帖子：Chrome和FF做我想做的事。两个都没有显示间隙。也许可以解释得更好一点？我注意到我不是唯一一个得出这个结论的人（耸耸肩）。我不想在字里行间留下空白。只在字里行间。谢谢。一个跨度在每个浏览器上都能正常工作。我在这里更新了我的小提琴：现在我如何在一行的最后一个单词后面添加更多的空间，使背景不会立即停止？你的意思是想在白色背景的行末尾添加一些空间？如果是，只需添加填充。@SimonPertersen:您的解决方案消除了我想要的行之间的间隙，并且在Safari和IE10中无法正确显示。你试过了吗？
margin-right:1px;