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

Question

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

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

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

注意：我不能添加 html 到它，所以不能只添加 a <br>，我只能对其应用样式。

现在如何（没有内联）：

与display: inline：

我想要它：

标签： css

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>