Html 换行时内联块中不必要的空间

当一条线断开时，是否可以防止内联块右侧出现不必要的空间？为了清楚起见，这里是我的代码

.区块1{ 宽度：300px； 边缘底部：30px； } .区块2{ 宽度：230px； } .正文{ 显示：内联块； 背景色：rgb50、50、50； 颜色：白色； 字体大小：40px； } 主要长文本 主要长文本

---

你想要的是一个更亮的效果。不幸的是，当display:inline块在元素周围绘制一个框时，它将不起作用。相反，您可以使用display:inline来实现您想要的。只需用另一个元素包装内部文本，然后说，给它一个类。highlighter:

的位置参数为：

水平偏移 垂直偏移 模糊半径 框阴影为-10px 0 0 0将生成一个框阴影，该框阴影向左偏移10px，创建一个假想的左填充，或背景的延伸，没有y偏移，也没有模糊。10px 0的情况与此相反

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

请参见下面的概念验证示例：

.区块1{ 宽度：300px； 边缘底部：30px； padding:10px；/*将此值指定为与框阴影偏移相同的值*/ 背景色：钢蓝色；/*这样你可以看到荧光灯不会掉到外面*/ } .正文{ 显示：内联块； 字体大小：40px； 页边距底部：40px；/*仅用于表示目的*/ } .主文本.荧光笔{ 背景色：rgb50,50,50； 颜色：白色； 显示：内联； 线条高度：1.5；/*使用线条高度以避免背景重叠*/ 框阴影： -10px 0 rgb50,50,50，/*左框阴影*/ 10px 0 rgb50,50,50；/*右框阴影*/ 填充物：10px 0；/*顶部和底部填充物*/ } 乱数假文 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet，我是一个很长的头衔 .区块1{ 宽度：300px； 边缘底部：30px； } .区块2{ 宽度：230px； } .正文{ 显示：内联； 背景色：rgb50、50、50； 颜色：白色； 字体大小：40px； } 主要长文本 主要长文本

---

也许你应该使用最小宽度，但这不是一个好的解决方案。你到底想做什么？好吧，你指定元素的宽度应该是230px，那么是哪个呢？230px或内容的宽度？我必须在文本块的右上方添加一个符号。它是自适应页面，所以当块的宽度改变时，这个问题就会出现。我尝试了FlexBox，绝对定位，但尚未解决此问题。我只是更改了您的显示属性-->显示：内联；

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

.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 */
}