Question

我要做什么：

我正在尝试获得以下结果：

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>

但是，在上面的示例中，黑色背景覆盖了一个“块”，而不是环绕每行文本。

那么，如何让我的第二个片段以与第一个相同的方式运行？

Answer 1

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

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>

Answer 2

另一种不使用跨度内的跨度的解决方案。

.container {
  display: inline-block;
  color: white;
  width: 200px; /* Width to define where line break should appear */
  text-align: right;
  line-height: 2;
}
.txt {
  display:inline;
  background: black;
  padding:2px 0;
}

<div style="text-align: right;">
  <div class="container">
    <span class="txt">Hello world this is some text hello world. Hello world this is some text hello world. </span>
  </div>
</div>

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

2 个答案: