html - 在 span 标签中显示 flex 和包装文本会在单词之间产生不需要的间距

Question

我已经为父元素设置了 display flex，因为我需要伪元素并且文本彼此相邻。但我还将部分文本放在 span 标签内以使其更轻盈，但在这种情况下，display flex 也会在 span 标签外分配我的文字之间的间距。在这里你看到:

相反，我需要像普通句子一样显示 in products and services，因为它是同一个 p 标签 div 的一部分，只是前几个单词也包含在 span 标签中。

代码:

#page-sub-header p {
  margin-left: 0;
  font-size: 40px;
  font-weight: 400;
  text-align: left;
  line-height: 1.2;
  padding-bottom: 60px;
  display: flex;
}

#page-sub-header p:before {
  content: "";
  display: block;
  width: 5px;
  height: 150px;
  background-image: url(rectangle.jpg);
  margin-right: 15px;
  float: left;
}

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="sub_container">
        <p class="header_tag">
          <span>Maintaining only the highest standards of quality</span> in products and services.
        </p>
      </div>
    </div>
  </div>
</div>

Answer 1

这里发生了两件事:

• 最右边的展开的文本变成了一个匿名的 flex 元素，这在某种程度上等同于将它包裹起来(我在下面的示例中这样做是为了展示它的所有行为)。

• 你得到的空间是因为当内部左边的 span 包裹它的文本时， span 本身并没有意识到这一点，也不会调整它的宽度。
  这是框模型的默认行为，无论您是否使用 Flexbox 都会发生。

因此，您要么需要一个脚本来计算和调整左侧 span 的宽度，要么使用媒体查询。

请注意，display: block 和编辑后的 ​​float: left 没有任何影响，因为 pseudo 是一个 flex 元素，而且， float: left 实际上也会在某些浏览器上引起问题。

堆栈代码段 - 添加了边框，因此您可以看到它在调整浏览器宽度大小时的表现。

p {
  margin-left: 0;
  font-size: 40px;
  font-weight: 400;
  text-align: left;
  line-height: 1.2;
  padding-bottom: 60px;
  display: flex;
}
p span {
  border: 1px solid red;
}

p:before {
  content: "";
  /*display: block;         does not apply on flex item's  */
  width: 5px;
  height: 150px;
  background: red;
  margin-right: 15px;
}

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="sub_container">
        <p class="header_tag">
          <span>Maintaining only the highest standards of quality</span> <span>in products and services.</span>
        </p>
      </div>
    </div>
  </div>
</div>