没有内联填充的内联元素的背景颜色

Question

我希望背景颜色完全包裹在内联字符周围。

无法更好地解释它，所以这里的图像显示了我想要的内容：

HTML

<div>
  <span>HTML Text block - HTML Text block</span>
</div>

CSS

div {
  max-width: 300px;
  line-height: 1.5;
  text-transform: uppercase;
}

span {
  background-color: white;
  box-shadow: 5px 5px 0 black;
  padding: 0;
}

如果不能单独使用CSS，JavaScript可以提供任何帮助吗？

Here's a codepen

Answer 1

试试这个：

{{1}}

Answer 2

试试这个：<span> HTML文字<br>阻止 - <br> HTML文字<br>阻止</span>