我必须在翡翠中使用空间吗？

Question

我正在使用Jade，除了Jade“吃掉”我的空间外，一切都很酷。

例如，在HTML中：

<b>Hello</b> <b>World</b>

或

<b>Hello</b>
<b>World</b>

“Hello”和“World”之间会有一个空格。

但是当转换为Jade时，它将是

b Hello
b World

当呈现为HTML时，空间消失了。像：

<b>Hello</b><b>World</b>

我是否必须在我的Jade模板中添加 ，或者我是否可以在生成的HTML中获得正常空间？

Answer 1

当然，当你有两个相同的标签后，你可以简单地合并它们：

b Hello World

但是，如果你有两个不同的兄弟标签，并希望它们之间有空格，你可以使用piping在它们之间输出一个空格。

例如：

b Hello
|     <-- 2 spaces after the pipe
i World

请注意，在指定标记内容/管道文本时，实际文本内容前面有空格。不输出该空白区域。因此，实际上，要管道一个空格，您需要一个|字符，后跟两个空格。

如果您所处的环境中没有保留尾随空格，您可以选择使用以下内容：

b Hello
=" "
i World

=评估JavaScript表达式并输出结果。

另请注意，  与HTML中的空格相同。要使用的正确HTML实体为 （如果您喜欢十六进制数字，则为 。）

 代表 n on- b reaking sp ace。它的字符代码是160（ ）。不同之处在于，在使用普通空间的情况下，多个空格将显示为单个空格，如果一条线溢出，则文本将在下一行继续。*另一方面，将显示非破坏空格。线条永远不会包裹在使用不间断空间的地方。

最好用一个例子来说明：

＆安培; NBSP;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    (Note the scroll bar at the bottom.)

空格（＆amp;＃32;）

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    (Note there is no scroll bar because all spaces are concatenated into one.)

_{*可以使用CSS white-space属性覆盖它。某些元素（例如<pre>）默认显示所有空格和行结尾。}

Answer 2

我为explicid空格做了一个mixin：

mixin space()
  | !{' '}

所以你只需要：

b Hello
+space
b World

Answer 3

这应该这样做：

b Hello
  | World

不幸的是，它在我的机器上的Chrome中生成了这个HTML输出：

<b>
              Hello
              World</b>

但最终它变成了：

结束

b Hello  
b World

......也会这样做。

Answer 4

如果您想要这样

<b>Hello</b>&nbsp;<b>World</b>

您应该使用此

b Hello
| 
b World

Answer 5

这是一种更简单的方法：

b Hello #{' '}
b world

Answer 6

这样，它将在单词之间留有间隔：

b Hello <-- single space at the end
b world

或使用单个空格的管道（不需要2个空格）

b hello
| <-- single space
b world