html - 换行时内联 block 中不必要的空间

Question

当换行时，是否可以防止在行内 block 右侧出现不必要的空间？为了清楚起见，这是我的代码

.block1 {
  width: 300px;
  margin-bottom: 30px;
}

.block2 {
  width: 230px;
}

.main-text {
  display: inline-block;
  background-color: rgb(50, 50, 50);
  color: white;
  font-size: 40px;
}

<div class="block1">
  <span class="main-text">Main long text</span>
</div>
<div class="block2">
  <span class="main-text">Main long text</span>
</div>

Answer 1

您正在寻找的是荧光笔效果。不幸的是，作为display: inline-block在元素周围绘制一个“框”，它不会起作用。相反，您可以使用 display: inline实现你想要的。只需用另一个 <span> 包裹内部文本元素，然后说，给它一个 .highlighter 的类:

<span class="main-text">
    <span class="highlighter">Lorem ipsum dolor sit amet</span>
</span>

要欺骗内联元素显示左右内边距，您可以简单地在其周围绘制一个框阴影。左侧的框阴影将具有负 x 偏移量，例如-10px 0 0 <color> ，而右侧的 x 偏移量为正，例如10px 0 0 <color> :

.main-text .highlighter {
  background-color: rgb(50,50,50);
  color: white;
  display: inline;
  box-shadow:
    -10px 0 0 rgb(50,50,50),  /* Left box shadow */
    10px 0 0 rgb(50,50,50);   /* Right box shadow */
  padding: 10px 0;            /* Top and bottom paddings */
}

box-shadow 的位置参数是:

1. x-offset
2. y-offset
3. blur-radius

-10px 0 0 <color> 的框影将生成一个向左偏移 10px 的框阴影(创建一个假想的左填充，或背景的扩展)，没有 y 偏移，也没有模糊。 10px 0 0 <color> 的反之亦然.

由于 10px 框阴影将在元素的绘图框之外，请确保您在父项中提供适当的填充/边距，以免它们被截断。

请参阅下面的概念验证示例:

.block1 {
  width: 300px;
  margin-bottom: 30px;
  padding: 10px;  /* Give this the same value as the box-shadow offsets */
  background-color: steelblue; /* So you can see that the highlighter doesn't fall outside */
}
.main-text {
  display: inline-block;
  font-size: 40px;
  margin-bottom: 40px; /* For presentational purposes only */
}
.main-text .highlighter {
  background-color: rgb(50,50,50);
  color: white;
  display: inline;
  line-height: 1.5;           /* Line height used so backgrounds don't overlap */
  box-shadow:
    -10px 0 0 rgb(50,50,50),  /* Left box shadow */
    10px 0 0 rgb(50,50,50);   /* Right box shadow */
  padding: 10px 0;            /* Top and bottom paddings */
}

<div class="block1">
  <span class="main-text"><span class="highlighter">Lorem ipsum</span></span>
  
  <span class="main-text"><span class="highlighter">Lorem ipsum dolor sit amet</span></span>
  
  <span class="main-text"><span class="highlighter">Lorem ipsum dolor sit amet, I am a very long title</span></span>
</div>