0

I'm translating an app from pug to HTML and I have some issues regarding whitespaces.

I'm using vue-loader (13.x) and webpack 3.x.

This code:

  <body>
    <span>
      Whitespaces, whitespaces everywhere
    </span>
  </body>

Will translate to this in the browser:

<body>
    <span>
          Whitespaces, whitespaces everywhere
        </span>
</body>

While this code:

<body>
    <span>No whitespace, yay!</span>
</body>

Will translate correctly.

I'd like both bits of code to translate to the same HTML <span>no whitespace</span>. I want this because when I translated pug to HTML, I got some weird spacing I didn't have on pug.

What can I do?

--edit whit my actual code and screenshot.

<p class="home-main-person-list-text align-self-top large-offset-2 small-offset-1 show-for-medium">
    À contacter
    <span class="home-main-person-list-text-nb">
        5
    </span>
</p>

Whitespace by default when I run the code: https://i.stack.imgur.com/Sz3dJ.png

No whitespace when I make it look like the pug result (just removing the spaces in console): https://i.stack.imgur.com/BWJxT.png

Graham
  • 7,431
  • 18
  • 59
  • 84
Simon Peyou
  • 693
  • 1
  • 6
  • 13
  • 2
    It is unclear to me what you are asking. HTML ignores whitespace differences *in code*. The two examples you give should render exactly the same in a browser -- having the ending on a different line should not affect the rendered layout. Do you mean that line of text are rendering differently that you expect, or that unexplained white space is appearing in your layout? Can you show screen shots? – user8356 Feb 13 '19 at 14:17
  • Just edited, thanks – Simon Peyou Feb 13 '19 at 14:32

0 Answers0