使内联元素包含换行符

Question

我有一个插件，可以像第一张图片一样在彼此之下创建2个文本元素。

我想在文本中添加背景，但只是在文本周围而不是元素的整个宽度。我知道我可以通过给它background-color和display: inline来做到这一点，这就是我所做的。 现在的问题是元素彼此相邻，我希望它们之间有一个换行符。

我试过了elements:before{ content: "\A"; }，但它没有用。

注意：我无法添加html，因此无法添加<br>，我只能为其应用样式。

现在如何（没有内联）：

display: inline：

我多么想要：

Answer 1

您可以尝试使用inline-flex。希望这对你有所帮助。

span {background:rgba(0,0,0,.5); color: #fff; padding: 5px; display: inline-flex;}
div {display: inline-flex;
    flex-direction: column;
    align-items: center;}

<div>
  <span>Hello</span>
  <span>texttexttext</span>
</div>

Answer 2

也许你可以添加宽度？像：

text{
width: 20px;
background-color: red;
}

希望它有帮助^ _ ^？