Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I remove 'white space text nodes' from my HTML? [duplicate]

I am getting an unwanted line before my <span> elements, and it shows as an empty dot in the developer mode of Firefox. How do I get rid of it?

It is not pseudo element of the div, so span::before doesn't work. And I have no idea how it is generating.

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

The white space text nodes are being adding before the span tags.

Find the image here

like image 888
Atul Kumar Avatar asked Mar 15 '17 07:03

Atul Kumar


People also ask

How do I get rid of extra white space in HTML?

HTML. Approach 2: We can also eliminate the extra space using the margin-top property. The margin-top property sets the top margin of an element.

How do I get rid of the white space between text in CSS?

In this CSS word-spacing example, we have removed 3px of space between the words by setting a -3px value for the word-spacing property. This removes some of the word spacing that has been added by the selected font.

What is whitespace text nodes?

HTML adds "white space text node" after some elements ( all inline elements), because it considers the white space between these elements part of them and it preserves them. So you can remove white space in html source or with javascript: from the inspector see which element has nextSibling empty text node.


1 Answers

I second Rory McCrossan's suggestion. Since span is inline element the spaces between them are preserved in html output. And newlines are changed to spaces too. For Example:

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

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

<div>
 <span>A</span><span>B</span>
</div>
like image 101
user31782 Avatar answered Oct 04 '22 22:10

user31782