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

Question

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

Answer 1

不要断线，要连续才能实现你的解决方案

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

通过使用displaycss属性，您可以删除空白并邻接对齐。

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

Answer 3

如上所述，这是由于相邻行之间的空白-您可以通过在div上使用display: flex包装span来删除它。通过将空span的宽度设为1ch

h -表示字形"0"的宽度，或者更准确地说，表示字形"0"的宽度。(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>

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