html - 将背景颜色环绕在右对齐的文字周围

我要做的是：
我正在努力达到以下结果：

div {
  text-align: right;
}

span {
  display: inline-block;
  background: #000;
  color: #fff;
}

<div>
  <span>abc</span><br/>
  <span>Hello world this is some text</span><br />
  <span>hello world</span>
</div>

然而，在上面的例子中，我已经把我的行分开了，因为我把每一行都包含在一个单独的span中。
我想通过使用width来定义一个新行何时应该开始/结束，而不是将每一个新行包含在自己的span中，从而获得与上面相同（或类似）的结果。
我试过的：
我试过做以下事情：

div {
  text-align: right;
}

span {
  display: inline-block;
  background: #000;
  color: #fff;
  width: 200px; /* Width to define where line break should appear */
}

<div>
  <span>abc</span><br/>
  <span>Hello world this is some text hello world</span>
</div>

但是，在上面的例子中，黑色背景覆盖一个“块”，而不是环绕每行文本。
那么，我怎样才能让我的第二个片段和第一个片段一样？

最佳答案

添加另一个保持内联的包装：

div {
  text-align: center;
}

span {
  display: inline-block;
  line-height:1; /*remove the gap*/
  color: #fff;
  width: 200px; /* Width to define where line break should appear */
}
span > span {
  display:inline;
  background: #000;
}

<div style="text-align: right;">
  <span><span>abc</span></span><br>
  <span><span>Hello world this is some text hello world</span></span>
</div>

您还可以调整填充并保持默认的行高：

div {
  text-align: center;
}

span {
  display: inline-block;
  color: #fff;
  width: 200px; /* Width to define where line break should appear */
}
span > span {
  display:inline;
  background: #000;
  padding:2px 0;
}

<div style="text-align: right;">
  <span><span>abc</span></span><br>
  <span><span>Hello world this is some text hello world</span></span>
</div>

关于html - 将背景颜色环绕在右对齐的文字周围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53422511/