Pug: Force add white space to the end of a line

I've found a good solution to this :)

p This is some text!{' '}
  span foo
  | !{' '}
  span bar

!{} in pug essentially means this:

Interpret the following as javascript and output the result exactly as written

So by adding !{' '} to the end of the line, it force adds an empty white space to the end of the pug text that will not be cut off by white space trimming software.

Pipe character acts like a space if you do not put any character after it

p This is some text
  |
  span foo
  |
  span bar

Result: This is some text foo bar

Actually there is kind of another way. Adding an extra space before each word in the spans will result in the text not merging together into one word when viewed in browser.

// no extra spaces
p This is some text
  span foo
  span bar

// extra space method
p This is some text
  span  foo
  span  bar

// JS literals method
p This is some text!{' '}
  span foo
  | !{' '}
  span bar

The extra space method is cleaner than the JS literals method I posted previously however it causes white space to be placed inside the span instead of around it.

Using the extra space method produces this HTML:

<p>This is some text<span> foo</span><span> bar</span></p>

Using the JS literals method produces this HTML:

<p>This is some text <span>foo</span> <span>bar</span></p>

The HTML output without using either method:

<p>This is some text<span>foo</span><span>bar</span></p>