如何删除跨度标签之间的空格，同时在每个跨度标签中保留空格？答案

【问题标题】：How can I remove spaces between span tags, while remain spaces in each span tag?如何删除跨度标签之间的空格，同时在每个跨度标签中保留空格？
【发布时间】：2020-01-12 05:49:46
【问题描述】：

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

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

.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 标签中的空格？

实际上，span 标签中的值是动态的。

【问题讨论】：

您是否尝试过使用nbsp; 来获取跨度中所需的空间？
@callback 实际上，span 的值是动态的。我正在使用 vuejs。这意味着可能有很多像这样的例子。
您对 HTML 有多少控制权？您需要以这种方式格式化，还是自动格式化？
@justrhysism 是的，我需要用 css 格式化它们。这些值是动态的。
“还有每个标签中的空格。” - 不，这不是这里发生的事情。 ch 和 Results 之间的空格 not 由于您在  Results. 中输入的前导空格字符 - 根据 HTML，文本内容周围的这种前导和尾随空格会自动删除规则。这两个词之间有一个空格，因为两个 span 元素之间有空格。您通过将父级的字体大小设置为 0 来删除 that。

标签： html css vue.js vuejs2

【解决方案1】：

为什么要这样做：

默认情况下，浏览器会将所有空格（包括换行符）折叠成一个“空格”字符。这在 white-space 上的 MDN CSS 文档中有所描述：

white-space: normal;
空白序列被折叠。源中的换行符的处理方式与其他空格相同。必要时换行以填充行框。

我认为这篇关于 HTML "When does white space matter in HTML?" 中的空白的文章值得阅读，其中详细解释了这一点。

解决方案：

您可以通过设置告诉浏览器在您的 中呈现空白：

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

还有：

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

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

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

【讨论】：

【解决方案2】：

哟！你的代码是完全正确的。它实际上工作正常，这是它在这种特定情况下无法正常工作的唯一原因。

<span>ch</span>
<span> Results.</span>

标签开头和结尾的空白被浏览器修剪掉。如下例所示。

解决方案：只需用$nbsp 替换第一个/最后一个或所有空格，它应该可以正常使用您的css :)

在你的情况下，由于空间是开始的，它会是。

<span>ch</span>
<span>&nbsp Results.</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>
  <span>&nbsp Results2. Text with middle space</span>
   
</div>

【讨论】：

谢谢。但是 span 标签中的值是动态的，可以通过脚本进行更新。

【解决方案3】：

如果您可以接受 javascript，那么您可以通过收集所有“仅空白或为空”的文本节点并将它们从 DOM 中删除来做到这一点，如下所示：

function getEmptyNodesUnder(node){
  var result = [];
  for (node = node.firstChild; node; node = node.nextSibling) {
    if (node.nodeType === 3) {
      if (node.textContent.trim().length === 0)
        result.push(node);
    }
    else {
      result = result.concat(getEmptyNodesUnder(node));
    }
  }
  return result;
}

// Find the <body> tag, or target e.g. a certain div
var body = document.getElementsByTagName("body")[0];

// Process everything in the body
var emptyNodes = getEmptyNodesUnder(body);
for (var i = 0; i < emptyNodes.length; i++)
  emptyNodes[i].parentNode.removeChild(emptyNodes[i]);

<div>
  <span>My name </span>
  <span>is </span>
  <span>Antonio.</span>
</div>

<div>
  <span>My name </span>
  <span>is</span>
  <span>not</span>
  <span> Henry.</span>
</div>

<div>
  <span>Sear</span>
  <span>ch</span>
  <span> Results.</span>
</div>

【讨论】：

【解决方案4】：

绝对不是最好的解决方案，但是您可以将带有“字母空间”类的容器放在display: flex 样式中，然后将所有字符串替换为您将放置在空格中的隐藏字符（在括号）[ ‏‎ ]。这对我有用。

【讨论】：

【解决方案5】：

您的跨度之间有换行符。尝试将它们彼此相邻放在一行中 - 中间不要有一个空格。否则，空格将是内联跨度的预期行为。

【讨论】：

【解决方案6】：

我刚刚看到你的前导和尾随空格。删除它们，一切都应该没问题，因为跨度之间的空格会自动添加，如果它们之间有空格的话。

【讨论】：

【解决方案7】：

更改white-space算法

.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;
  white-space:pre;
}

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

<div class="tried-with-font">
  <span>My name </span>
  <span>is </span>
  <span>Antonio.</span>
</div>

或者考虑一个带有内联块和伪元素的小技巧。这将更好地折叠跨度内的连续空间：

.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;
  display:inline-block;
}
.tried-with-font span:before,
.tried-with-font span:after {
  content:"\200B";
}

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

<div class="tried-with-font">
  <span>My name   </span>
  <span>is    </span>
  <span>Antonio.</span>
</div>

【讨论】：

:( 正如您在 sn-p 中看到的，您的答案是错误的。对不起。
@Antonio 怎么错了？您说如何删除跨度标签之间的空格，同时在每个跨度标签中保留空格？我保留每个跨度内的空间，而 font-size:0 删除了跨度之间的空格
请尝试运行您的 sn-p。最后一句话很奇怪。 :(
@Antonio 你用的是什么浏览器？使用 Chrome 和 FF 对我来说很好
我正在使用 chrome。我尝试了基于 vuejs 的项目。但它不工作。很抱歉这么说。但是，如果我在编辑模式下尝试了您的 sn-p，它似乎运行良好。我不知道为什么会这样。