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

Question

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

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

Answer 1

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

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 : These elements behave like <td> HTML elements

Answer 2

只是不要打断线，让它以连续的形式出现，以实现您的解决方案

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

Answer 3

您可以使用 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>

Answer 4

如前所述，这是由于相邻行之间的白色 space 引起的 - 您可以通过将跨度包裹在 div 中并在其上显示：flex 来移除。并给空跨度 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>

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

How to remove spaces generated by span tag?

html

removing-whitespace