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，这种行为不是一个bug或任何东西，它只是包裹而不在下一行添加任何左边距。

但有没有一种方法，只要跨度中的文字环绕，我就可以在'is'的左边和'this'之前有相同的填充？

或者，如何才能让模型实现这种效果呢？

谢谢！

Answer 1

如果删除wrap-text类上的填充，则应删除由跨距和填充太多引起的间距。

你可以强制这个（尽管它有点hacky）使用box-shadow在行的左侧和右侧添加空间而不是左右填充。这是CSS Tricks关于盒子阴影的精彩文章。

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

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

<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>
  
  

Answer 2

使用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>

Answer 3

display: inline-block上的.bg可以解决问题。

Problems with inline elements

span是一个内联元素。内联元素的填充，边距，宽度和高度等属性仅部分应用。

所以，在这里，当你将填充应用于span时，这是一个内联元素，这意味着该元素保持内联而不是环绕。但是在你的图像中我可以看到它因为同一行（内联）上的不可用空间而被缠绕。因此，通常情况下，填充应用于元素的起始而不是下面，因为它是内联而不是块。

希望这可以帮助。

.grey{
  background:#ddd;
}
.bg{
	padding-left:20px;
	display:inline-block;
  font-size:30px;
}
.abg{
  background:red;
}

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

你可以在inline-block上使用span。别担心。