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

【问题标题】：remove space between text words and punctuation mark删除文本单词和标点符号之间的空格
【发布时间】：2014-04-17 10:04:48
【问题描述】：

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

HTML

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

正如您在此处看到的，5 和 , 元素之间存在空格，尽管填充和边距为零。这可能是由于字体容器边距或类似的东西。如何删除这些空格？

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

【问题讨论】：

我没有看到任何空格。
你的意思是把我们链接到一个例子吗？
实际的 span 元素之间可能有空格。

标签： html css

【解决方案1】：

您可以使用 float 或 font-size 防止呈现的空白。无需更改跨度的 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>

【讨论】：

【解决方案2】：

像这样：

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

如果你不想要（印刷）空格，那就不要写空格！

也就是说，我明白这并不总是可取的，尤其是在编写更复杂的结构时。在这种情况下，您可以（并且通常应该）在将 HTML 发送到浏览器之前将其缩小 - 就我个人而言，我将所有换行符和制表符删除为“不必要的”（如果我真的想要一个空格，我手动输入一个），这有效很好。

【讨论】：

你为什么不使用框架？（很酷的游戏创意顺便说一句！）
@Xatenev 因为它们太严格了。太笨重了。请注意我的页面加载时间有多快（显示在底部）？但是，这也是心理上的。如果我使用了一个框架并且某些东西不起作用，我会责怪框架（即工具）。但是因为我自己写了所有东西，所以我是它不起作用的唯一可能原因。
好吧，不过 - 在没有框架的情况下工作会增加被黑客入侵的机会（如果您不是安全专家）。而且它还增加了开发时间。
@Xatenev 实际上机会更低，因为当在常用框架中发现漏洞时，所有使用它的站点都容易受到攻击，但我很安全。也就是说，你是对的，我必须小心不要引入我自己的安全漏洞！但另一方面，它们对我来说更容易修复。至于开发时间......我喜欢权衡它与我学习框架所花费的时间；）
让我们continue this discussion in chat

【解决方案3】：

习惯了

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

Demo

第二个选项试试这个

<span>5</span><!--
--><span>,</span><!--
--><span>000</span>

Demo2

【讨论】：

【解决方案4】：

尝试删除标签之间的任何空格：

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

【讨论】：

【解决方案5】：

跨度是内联包装器，内联元素会留下空白。你可以试试这个

<span>5</span><!--
--><span>,</span><!--
--><span>000</span>

或者你可以一行完成

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

Fiddle

【讨论】：

几年前我第一次遇到这个“空间问题”时，添加 cmets 是我的第一个“解决方案”。它很快就变成了无法维护的混乱。
解决这个问题的好方法。