Question

我在div（）之前得到一条不需要的行，它在浏览器的开发者模式（firefox）中显示为空点。我该如何摆脱它？

它不是div的伪元素，所以span :: before不起作用。我不知道它正在产生。

<div class="coll-details">
    <h5>Div title</h5>
    <span class="fa counts fa-eye">&nbsp;234</span>
    <span class="fa counts fa-heart">&nbsp;123</span>
    <span class="fa counts fa-comment">&nbsp;123</span>
    <span class="fa counts fa-share">&nbsp;123</span>
</div>

空白文本节点在span标记之前添加。

FInd the image here..

Answer 1

我是第二个 Rory McCrossan的建议。由于span是内联元素，因此它们之间的空格将保留在html输出中。并且换行符也会更改为空格。例如：

<div>
 <span>A</span> <span>B</span>
</div>

<div>
 <span>A</span>
 <span>B</span>
</div>

<div>
 <span>A</span><span>B</span>
</div>

Answer 2

尝试一下！

<style>
div.coll-details{
word-spacing: -4px;
}
</style>

Answer 3

替换

<span class="fa counts fa-eye"></span>

使用

<span class="fa counts fa-eye"/>

应该解决问题。

除此之外，通过CSS将font-size设置为0也应起作用。

Answer 4

HTML在某些元素（所有内联元素）之后添加“空白文本节点”，因为它考虑了这些元素之间的空白并保留了它们。因此，您可以在html源代码中或使用javascript删除空格：从检查器中查看哪个元素具有nextSibling空文本节点。就您而言，它是跨度的，并针对每个元素执行此操作：

element.nextSibling.parentNode.removeChild(element.nextSibling);

从html中删除“空白文本节点”

4 个答案: