html - 删除文本单词和标点符号之间的空格

Question

我有这个简单的 HTML - 三个 span 元素，每个元素包含一个文本元素:

HTML

<span>5</span>
<span>,</span>
<span>000</span>

如您所见，5 和 , 元素之间有空格，尽管填充和边距为零。这可能是由于字体容器边距或类似原因造成的。如何删除这些空格？

编辑谢谢大家。一个重要的说明 - span 项是使用 jQuery 的 append 方法添加的，所以我无法将它们放在一行中

Answer 1

您可以使用 float 或 font-size 来防止呈现空白。无需为 span 更改 HTML，但父元素是必需的。

/* Float method */
.float {
  overflow: hidden /* Or any other method to clear float */;
}

.float span {
  float: left;
}

/* Font size method */
.fontsize {
  font-size: 0;
}

.fontsize span {
  font-size: 1rem;
}

<div class="float">
  <span>5</span>
  <span>,</span>
  <span>000</span>
</div>

<div class="fontsize">
  <span>5</span>
  <span>,</span>
  <span>000</span>
</div>