css - 使行内元素包含换行符

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>