How to remove spaces generated by span tag?

Question

I have inserted single letters in span tag. While running this web page on the browser, span tag insert 4 pixel space automatically before every letter. I want to remove that space. Please suggest me best solution.

h
e
l
l
o

w
o
r
l
d

user_13858444 · Answer

Just Don’t Break Line Make It In Continuous Form In Order To Achieve Your Solution

helloworld

user_14829703 · Answer

By using display css properties, you can remove white space and align adjacently.

span {
  display: table-cell;
}

h
e
l
l
o

w
o
r
l
d

table-cell : These elements behave like HTML elements

user_5867572 · Answer

As noted this is occurring because of the white space between adjacent lines - you can remove by wrapping the spans in a div with display: flex on it. and by giving the empty span a width of 1ch

the ch - represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element's font).

Although I would do this differently entirely and you do NOT need to use jQuery for such a simple thing.

.wrapper {
  display: flex
}

span:empty {
  width: 1ch
}


  h
  e
  l
  l
  o
  
  w
  o
  r
  l
  d

user_12386831 · Answer

You can use Jquery to remove the spaces between span tag.

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

How to remove spaces generated by span tag?

4 Answers