html - CSS - 在环绕的跨度左侧填充

Question

我有这个简单的 html 模型:

<div class="grey wrap-text">
    <div id="content">
      <span contenteditable="true">
        <span class="bg">this is some text that that wraps around when there is too much text</span>
      </span>
    </div>
  </div>

它产生这样的结果:

CSS:

.bg {
  background-color: black;
  opacity: 0.8;
  padding: 30px 20px 30px 30px;
}

.wrap-text {
  color: white;
  line-height: 130px;
  text-align: right;
  margin: 0 auto;
  font-size: 60px;
  padding: 0px 100px 0px 600px;
}

Ofc，这种行为不是错误或其他任何东西，它只是环绕而没有在下一行添加任何左填充。

但是，有没有一种方法可以在 span 中的文本环绕时，在“is”的左侧使用与“this”之前相同的填充？

或者，模型如何才能达到这种效果？

谢谢!

Answer 1

使用 box shadow method

.bg {
  color: white;
  background-color: black;
  opacity: 0.8;
  padding: 30px 0px 30px 0px;
  box-shadow: 30px 0 0 black, -30px 0 0 black;
  line-height: 100px;
  
}

<div class="grey">
    <div id="content" class='container'>
      <span contenteditable="true" class='container'>
        <span class="bg">this is some teeeeeeeeeeeext that wraps around when there is tooasdfasdfasd much text</span>
      </span>
    </div>
  </div>