Pug：强制在行尾添加空格答案

【问题标题】：Pug: Force add white space to the end of a linePug：强制在行尾添加空格
【发布时间】：2017-05-05 08:26:17
【问题描述】：

所以我有这个基本的哈巴狗代码

p This is some text
  span foo
  span bar

预期的输出如下所示：

这是一些文本 foo bar

但是它实际上输出了这个（空格被删除）：

这是一些 textfoobar

可以通过在行尾添加一个空白来添加空格。

虽然在我的编辑器中打开了空白修剪，但我需要能够保留空白。保存文件时，空白修剪会删除行尾的空白。

那么有没有办法强制在行尾添加空格，即使在编辑器中打开了空白修剪功能也会保留？

【问题讨论】：

标签： pug whitespace

【解决方案1】：

其实还有另一种方式。在跨度中的每个单词之前添加一个额外的空格将导致在浏览器中查看时文本不会合并为一个单词。

// 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

额外的空间方法比我之前发布的 JS 文字方法更干净，但是它会导致空白被放置在跨度内而不是在它周围。

使用额外的空间方法产生这个 HTML：

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

使用 JS 文字方法生成以下 HTML：

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

不使用任何一种方法的 HTML 输出：

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

【讨论】：

【解决方案2】：

我找到了一个很好的解决方案:)

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

!{} in pug 本质上是这个意思：

将以下内容解释为 javascript 并完全按照所写的方式输出结果

因此，通过在行尾添加!{' '}，它会强制在 pug 文本的末尾添加一个不会被空白修剪软件截断的空白。

【讨论】：

我曾经使用过这种解决方法，但它似乎不再起作用了......

【解决方案3】：

管道字符如果你没有在它后面放置任何字符，它就像一个空格

p This is some text
  |
  span foo
  |
  span bar

结果：这是一些文本 foo bar

【讨论】：

【解决方案4】：

您可以使用= 运算符和buffered 代码的引号，例如：

p= 'This is some text '
  span= 'foo '
  span bar

【讨论】：

在简单的情况下很好。缺点是它阻止您编写内联 pug 代码。它还将空间放置在其中一个跨度内，这可能是不可取的，但在大多数情况下都可以。

【解决方案5】：

这里的解决方案不是很干净。就个人而言，我使用转义字符，这是一种解决方案，允许我毫无问题地使用每个 Unicode 字符（包括 HTML 使用的字符）：

p This is some text
  span &#32;foo
  span &#32;bar

Table of the most used ones

【讨论】：

您的解决方案只是“额外空间方法”，但使用 Unicode 字符而不是常规的旧空间。从我的角度来看，更丑更难写。