显示flex并在span标记中包装文本会在单词之间产生不必要的间距

Question

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

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

代码：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里有两件事：

• 最右边的未打开的文本变成了一个匿名的灵活项目，它有点包裹它（我在下面的示例中做了以表示它的行为）。

• 您获得的空间是因为当左侧内部span包裹其文字时，span本身并未意识到这一点，并且无法调整其宽度。
  这是盒子模型的默认行为，无论您是否使用Flexbox都会发生这种情况。

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

作为备注，display: block和已编辑的float: left没有影响，因为伪是一个弹性项目，float: left实际上可能导致问题在一些浏览器上很好。

堆栈代码段 - 添加了边框，以便您在调整浏览器宽度时可以看到它的行为。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;