我必须在 Jade 中使用 来表示空间吗？

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

请注意，指定标签内容/管道文本时，实际文本内容前面有一个空格。不输出该空白。因此，实际上，要通过管道传输空白，您需要一个

|

字符，后跟 two 空格。

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

b Hello
=" "
i World

=

计算 JavaScript 表达式并输出结果。

另请注意，

 

与 HTML 中的空格不相同。使用的正确 HTML 实体是  

（如果您喜欢十六进制数字，则为 

 

）。

 

 代表 

non-breaking space。它的字符代码是160（ 

）。不同之处在于，在使用普通空格的情况下，多个空格将显示为单个空格，如果一行溢出，文本将在下一行继续。* 另一方面，不间断空格将始终显示。使用不间断空格的地方永远不会换行。

最好用一个例子来说明：

 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    (Note the scroll bar at the bottom.)

空格 ( )

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

* 这可以用 CSS _white-space

属性覆盖。某些元素（例如 <pre>

）默认显示所有空白和行结尾。

Answer 2

这应该可以做到：

b Hello
  | World

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

<b>
              Hello
              World</b>

但最终变成：

结束

b Hello  
b World

...也会这么做。

Answer 3

我为显式空白做了一个混合：

mixin space()
  | !{' '}

所以你只需要：

b Hello
+space
b World

Answer 4

这里有一个更简单的方法：

b Hello #{' '}
b world

Answer 5

如果你想要这样

<b>Hello</b>&nbsp;<b>World</b> 你应该使用这个

b Hello
| 
b World

Answer 6

这样它将在单词之间呈现空格：

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

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

b hello
| <-- single space
b world

Answer 7

您可以使用

标签插值：

p #[b Hello] #[b world] 会导致

<p><b>Hello</b> <b>world</b></p> 这对于文本的内联格式特别有用。您还可以使用属性，例如

p This is #[i(title='italic font') italic] and this is #[b(title='bold font') bold]. 这会导致

<p>This is <i title="italic font">italic</i> and this is <b title="bold font">bold</b>.</p> 因此不需要 或其他解决方法。