如何删除 span 标签生成的空格？答案

【问题标题】：How to remove spaces generated by span tag?如何删除 span 标签生成的空格？
【发布时间】：2021-11-13 21:05:21
【问题描述】：

我在 span 标签中插入了单个字母。在浏览器上运行此网页时，span 标签会在每个字母前自动插入 4 个像素空间。我想删除那个空间。请建议我最好的解决方案。

<span>h</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span></span>
<span>w</span>
<span>o</span>
<span>r</span>
<span>l</span>
<span>d</span>

【问题讨论】：

只需要使用html或者css来实现吗？？

标签： html removing-whitespace

【解决方案1】：

不要断线，以连续的形式进行，以实现您的解决方案

&lt;span&gt;h&lt;/span&gt;&lt;span&gt;e&lt;/span&gt;&lt;span&gt;l&lt;/span&gt;&lt;span&gt;l&lt;/span&gt;&lt;span&gt;o&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;w&lt;/span&gt;&lt;span&gt;o&lt;/span&gt;&lt;span&gt;r&lt;/span&gt;&lt;span&gt;l&lt;/span&gt;&lt;span&gt;d&lt;/span&gt;

【讨论】：

这是我认为唯一正确的方法。
@Swapnil Kotkar 如果您觉得我的解决方案有帮助，请告诉我

【解决方案2】：

通过使用display css 属性，您可以去除空白并相邻对齐。

span {
  display: table-cell;
}

<span>h</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span></span>
<span>w</span>
<span>o</span>
<span>r</span>
<span>l</span>
<span>d</span>

table-cell ：这些元素的行为类似于<td> HTML 元素

【讨论】：

如果他不把它们换行，就没有空格。使用table-cell 可能会显示正确的输出，但这不是正确的方法。使用table-cell 的元素的容器应该有display:table 并且会产生更多的空白。（但这是我的看法）

【解决方案3】：

如前所述，这是由于相邻行之间的空白造成的 - 您可以通过将 span 包裹在一个带有 display: flex 的 div 中来移除。并通过为空跨度提供 1ch 的宽度

ch - 表示元素字体中字形“0”（零，Unicode 字符 U+0030）的宽度，或更准确地说是提前量度。

虽然我会以完全不同的方式做这件事，你不需要为这么简单的事情使用 jQuery。

.wrapper {
  display: flex
}

span:empty {
  width: 1ch
}

<div class="wrapper">
  <span>h</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
  <span></span>
  <span>w</span>
  <span>o</span>
  <span>r</span>
  <span>l</span>
  <span>d</span>
</div>

【讨论】：

【解决方案4】：

您可以使用 Jquery 删除 span 标签之间的空格。

        //jquery
        $('p').contents().filter(function() { return this.nodeType === 3; }).remove();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <p>
        <span>h</span>
        <span>e</span>
        <span>l</span>
        <span>l</span>
        <span>o</span>
        <span>w</span>
        <span>o</span>
        <span>r</span>
        <span>l</span>
        <span>d</span>
        </p>

【讨论】：

为什么要让简单的事情变得更复杂？？
我不明白这个答案是否被接受。这是一个肮脏的修复。只是不要把它们放在新的线上。这将显示空格，直到 jQuery 运行。它还将在所有 p 元素上运行...
如果编辑器自动格式化代码@GertB。
@HritikPotawade 那是编辑器的错误，不是吗？跨度是内联元素。而且，您的代码仍然会影响页面上的所有 p 元素
是的。你是对的 Hritik Potawade。当编辑器在不同的行上自动格式化我们的标签时，这是最好的解决方案。