html - 如何删除 span 标签之间的空格，同时在每个 span 标签中保留空格？

Question

我的问题是:跨度之间出现了意想不到的空格。

所以我尝试通过设置 font-size: 0 来删除它们进入包装<div>标签。然后它不仅删除 <span> 之间的空格标签，还有每个 <span> 中的空格标签。

.word-space {
  color: white;
  background-color: gray;
}
.letter-space {
  color: white;
  background-color: red;
}

.tried-with-font {
  font-size: 0;
}
.tried-with-font span {
  font-size: 18px;
}

<div class="word-space">
  <span>My name </span>
  <span>is </span>
  <span>Antonio.</span>
</div>

<div class="letter-space">
  <span>Sear</span>
  <span>ch</span>
  <span> Results.</span>
</div>

<h3>The result I tried:</h3>

<div class="tried-with-font">
  <span>Sear</span>
  <span>ch</span>
  <span> Results.</span>
</div>

问题:如何删除 span 标签之间的空格，同时在每个 span 标签中保留空格？

In fact, the values which are in span tags are dynamic.

Answer 1

为什么它在做它正在做的事情:

默认情况下，浏览器会将所有空白(包括新行)折叠成一个“空格”字符。这在 white-space 上的 MDN CSS 文档中进行了描述。 :

white-space: normal;
Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.

我认为值得阅读这篇关于 HTML 中的空白的文章“When does white space matter in HTML?”，其中对此进行了非常详细的解释。

解决方案:

您可以告诉浏览器在您的 <span> 中呈现空白区域通过设置:

.my-span {
  white-space: pre;
}

还有:

我不确定你是否仍然需要删除跨度之间的空白，但我认为值得考虑 float属性(property)而不是摆弄font-size .

.with-float span {
  float: left;
  white-space: pre;
}

<div class="with-float">
  <span>Sear</span>
  <span>ch</span>
  <span> Results.</span>
</div>