问题
I am using Jade and everything is cool except that Jade "eats" my spaces.
For example, in HTML:
<b>Hello</b> <b>World</b>
or
<b>Hello</b>
<b>World</b>
Will have a space between "Hello" and "World".
But when converting to Jade it'd be
b Hello
b World
When rendered as HTML, the space is gone. Like:
<b>Hello</b><b>World</b>
Do I have to add in my Jade template or is there any way I can get a normal space in the generated HTML?
回答1:
This should do it:
b Hello
| World
Unfortunately it produces this HTML output in Chrome on my machine:
<b>
Hello
World</b>
But in the end it becomes:
To come to an end
b Hello
b World
...will do it too.
回答2:
Of course, when you have two of the same tags after each other, you can simply merge them:
b Hello World
But, if you would have two different sibling tags and would want a space between them, you could use piping to output a space between them.
For example:
b Hello
| <-- 2 spaces after the pipe
i World
Note that when specifying tag contents / piping text, the actual text content is preceded by a white space. This white space is not outputted. So, in effect, to pipe a white-space you need a | character followed by two spaces.
If you are in an environment where trailing spaces are not preserved, you can alternatively use the following:
b Hello
=" "
i World
= evaluates a JavaScript expression and outputs the result.
Also note that is not the same as a space in HTML. The correct HTML entity to use is   (or   if you like hexadecimal numbers).
stands for non-breaking space. Its character code is 160 ( ). The difference is that where an ordinary space is used, multiple spaces will be shown as a single space and if a line overflows, the text will continue on the next line.* Non-breaking spaces on the other hand will allways be shown. Lines will never wrap where a non-breaking space is used.
This is best illustrated with an example:
(Note the scroll bar at the bottom.)Space ( )
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    (Note there is no scroll bar because all spaces are concatenated into one.)* This can be overridden with the CSS white-space property. Some elements, such as <pre>, display all white space and line endings by default.
回答3:
I made a mixin for explicid whitespace:
mixin space()
| !{' '}
so you only need to:
b Hello
+space
b World
回答4:
if you want it like this
<b>Hello</b> <b>World</b>
You should use this
b Hello
|
b World
回答5:
Here is a simpler way:
b Hello #{' '}
b world
来源：https://stackoverflow.com/questions/20727360/do-i-have-to-use-nbsp-for-space-in-jade