Pug (Jade) extra space added between formatted tags on gulp build

Question

I use Gulp, webpack and pug(jade). The issue is with the dist-code that has an extra space because of formatting on build.

pseudo-code:

label
  each item in items
    span
      if kkk == 2
        =item[1]
      else
        abbr(title='ttttttt')
          =elem

and the resulting (dist) .html is something like this:

<label for="ааааа">set to 
    <abbr title="Scalable Vector Graphics">SVG/</abbr>
    <abbr title="Joint Photographic Experts Group">JPEG</abbr>
</label>

and looks like:

set to SVG/ JPEG

How to remove the space after '/', or to change something to make it look like:

set to SVG/JPEG

and here is my code:

+mixin dd['svg', 'sdf sdfsdsd SVG', , , , [['Scalable Vector Graphics', 3]]],

mixin dd(list)
- var words = [];
- var abbr = [];
each item, i in list
//-....
    - var words = [];
    - var abbr = [];
    +e.INPUT(id= it[0])
    +e.LABEL(for=it[0])
        - words = item[1].match(/[^\s\/]+\/?/g)
        each elem, i in words
            if it[3] != undefined && it[3].indexOf(i + 1) != -1
                +e.SPAN
                    +other(it[5], abbr, i, words.length, elem)
            else
                +other(it[5], abbr, i, words.length, elem)

mixin other(abbrs, abbr, i, wordslength, elem)
    if abbrs != undefined && abbrs.some(elem => (abbr = elem)[1] == (i + 1))
        abbr(title= abbr[0])
            =elem
        else
            =elem

In other words, need to make

<abbr title="Scalable Vector Graphics">SVG/</abbr>
<abbr title="Joint Photographic Experts Group">JPEG</abbr>

be one line inside the resulting build (dist) code:

<abbr title="Scalable Vector Graphics">SVG/</abbr><abbr title="Joint Photographic Experts Group">JPEG</abbr>

display: inline-block; changes nothing. Checked other several similar questions - irrelevant to this issue.

Pierides

Answer 1

I'm afraid there is no elegant way around this one.

If you want a quick solution, I recommend setting the font size of the parent element to 0.

If you want to solve it from the Pug perspective, maybe try disabling prettified HTML output in Pug ({ pretty: false })? Not sure whether it will fix it in this case, but it might (the resulting HTML, however, is not pretty anymore).

Hedvah

thank you! font size 0 gave me a thought to try letter-spacing:-10px and that helped!! font-size 0 breaks formatting a bit. I also wrap label-words into divs to have styles different to span-styles. – Pierides