Jade渲染的HTML值中存在额外的空格

Question

每次我在Jade中编写HTML时，每个元素的值后面都会添加额外的空格。

例如，在我的Jade模板中，我会有这样一行代码：

label(for="keyword") Keyword

当它被渲染时，源代码将如下所示：

<label for="keyword_1">Keyword
          </label>

我遇到了一些问题，有多余的空格影响我的CSS。 而且，这看起来不太整洁 :) 有人知道我怎么可以防止它被插入吗？

- Jon

---

确保在Jade中的“Keyword”后面没有任何空格，这可能会导致问题。 - alessioalex

谢谢，我已经仔细检查过了，没有发现任何问题，但我仍然遇到了这个问题。 - Jon

Answer 1

请查看底部的更新

我假设您正在使用express - 请检查您的应用程序设置。

app.set('view options', { pretty: false })

如果你使用jade渲染并启用了pretty: true模式，它会通过缩进排列生成的源代码（标签）来进行嵌套。关闭漂亮打印功能可以解决问题（但要确保没有尾随空格，如@alessioalex所指出的那样）。

如果你有需要输出漂亮格式化的原因（比如客户端规范），那么你可以尝试其他方法。我曾经遇到过在textarea标签中出现类似问题的情况，这是很令人沮丧的，因为空格实际上被注入到表单的内容中。我解决这个问题的方法是使用带有闭合标签的字面html。

<textarea name="someField"></textarea>

文档可以为你提供更多细节（在这种情况下搜索html）。GitHub上有一个公开的第341号问题，建议采用类似于Scalate中的这种方法，但它目前在jade中不起作用（截至版本0.19.0）。

希望能对你有所帮助。

更新

好的-微妙而酷...有一种更好的方法可以保持来自pretty：true的性感输出，并避免标签内部的间距（我的textarea示例）...我刚试了将 . 添加到标签末尾（见代码），它就完美工作™了 :-)

form(name='frmname', method='POST')
  textarea(name='someField').

渲染：

<form name="frmname" method="POST">
  <textarea name="someField"></textarea>
</form>

太好了！

为什么这个能运行？因为jade将标签上的.后缀视为标志，表示该标签将只包含一个文本块，并且没有提供文本块，因此它默认为''，即一个空字符串。

- AJ.

---

嘿，谢谢你的评论！你说得没错，关闭漂亮模式肯定会有帮助，但在我的情况下，我需要保持它启用。使用“.”的技巧很有意思，但我正在寻找一些能够真正扩展的东西。 我一定会继续研究并在这里发布任何发现。 - Jon

@Jon，我希望scalate风格的方法能够被正式采用，因为它似乎是当前系统的一个合乎逻辑的延伸 - 我们拭目以待。TJ现在忙于许多项目......我们拭目以待！ - AJ.

@st3，我只是想提醒一下，因为它是一个未记录的功能：随着jade不断改进，这种行为可能不会继续有效。 - AJ.