如何防止 Pug 折叠两个标签之间的所有空白? [英] How do I prevent Pug from collapsing all whitespace between two tags?

问题描述

当我在模板中执行此操作时:

When I do this in a template:

div(class="field")
    label Password
    input(type="password")

我得到这个输出:

<div class="field"><label>Password</label><input type="password"></div>

因此标签和输入标签之间的空间为零，而不是它们之间的单个空间，而它们在普通 HTML 文件中位于两条不同的行上.

So the label and input tags have zero space between them, instead of the single space between them that they would have in a normal HTML file where they're on two different lines.

如何在 Pug 模板中以尽可能不丑陋的方式在两个元素之间获得标准的单个空格?我可以使用 CSS 来修复间距，但这似乎要添加很多冗长的内容，只是为了在您不使用 Pug 时获得标准的 HTML 功能.

How do I get that standard single space between the two elements, in a Pug template, in the least ugly possible way? I could use CSS to fix the spacing, but that seems like a lot of verbosity to add, just to get what is a standard HTML feature when you aren't using Pug.

推荐答案

这符合我的要求(在呈现的 HTML 输出中，在两个元素之间恰好放置一个空格).

This does what I want/expect (put exactly one space between the two elements, in the rendered HTML output).

div(class="field")
    label Password
    = ' '
    input(type="password")

在行首使用 = 运算符可以插入 Javascript 表达式.所以在这里，我插入一个包含一个空格的字符串.

Using the = operator at the beginning of a line allows you to insert a Javascript expression. So here, I'm inserting a string containing a single space.

这篇关于如何防止 Pug 折叠两个标签之间的所有空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！