Html 在jade中对齐文本？_Html_Pug

Html 在jade中对齐文本？

html

Html 在jade中对齐文本？,html,pug,Html,Pug,我有一些简单的东西要对齐。根据这个答案，我发现我可以使用空白：pre 所以我写了 doctype html html(lang="en") head meta(charset="utf-8") body p. Jade is terse #Foo p(style='white-space:pre;') | One: #[span.A] | Two: #[span.B] | Th

我有一些简单的东西要对齐。根据这个答案，我发现我可以使用

空白：pre
所以我写了
doctype html
html(lang="en")
  head
    meta(charset="utf-8")
  body
    p.
      Jade is terse

    #Foo
      p(style='white-space:pre;')
        |    One: #[span.A]
        |    Two: #[span.B]
        |  Three: #[span.C]
        |   Four: #[span.D]
        | blah blah blah 

在我的输出中得到了这个
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body><p>Jade is terse
</p><div id="Foo"><p style="white-space:pre;">   One: <span class="A"></span>   Two: <span class="B"></span> Three: <span class="C"></span>  Four: <span class="D"></span>blah blah blah </p></div></body></html>

唉，空白：pre和管道仅在没有嵌套标记（即span
s）的情况下才能保留格式。要使输出完全按照管道和内联标记的方式打印，您必须稍微修改一下，并使用某种转义字符串插值（{}
）来呈现内联JavaScript
-function whiteSpaceFunc(str) { return '\n\t' + ' '.repeat(8-str.length) + str + ': ';}

p(style='white-space:pre;')
  |#{whiteSpaceFunc('One')}#[span.A]
  |#{whiteSpaceFunc('Two')}#[span.B]
  |#{whiteSpaceFunc('Three')}#[span.C]
  |#{whiteSpaceFunc('Four')}#[span.D]
  |#{'\n\t\t'}  blah blah blah

您需要的基本插值表达式是{'\n\t\t'}
，以确保它与标记对齐。与常规JavaScript一样，\n
将字符串返回到下一行的开头，因此需要\t
s
但是，有多种方法可以实现此插值
内联
在您的示例中，span
前面的所有冒号都缩进了8个字符，因此您可以使用一些简单的数学和将它们排列起来。重复，而不必计算出要包含多少空格的细节
作用
注意函数前面的-
，这是运行一行JavaScript所必需的
-function whiteSpaceFunc(str) { return '\n\t' + ' '.repeat(8-str.length) + str + ': ';}

p(style='white-space:pre;')
  |#{whiteSpaceFunc('One')}#[span.A]
  |#{whiteSpaceFunc('Two')}#[span.B]
  |#{whiteSpaceFunc('Three')}#[span.C]
  |#{whiteSpaceFunc('Four')}#[span.D]
  |#{'\n\t\t'}  blah blah blah

混合
一种更自然的函数方法。注意使用className
而不是class
作为参数<代码>类
似乎被保留并抛出错误
   p(style='white-space:pre;')
        mixin whiteSpacedLine(str,className)
          |  #{'\n\t\t' + ' '.repeat(8-str.length)}#{str}: #[span(class=className)]
      +whiteSpaceLine('One','A')
      +whiteSpaceLine('Two','B')
      +whiteSpaceLine('Three','C')
      +whiteSpaceLine('Four','D')

混合+迭代
也许这是最简单的方法。如果将VAL
数组按如下代码所示在多行中展开，请确保将其包装在缩进到-
下的代码块中，并确保-
后面没有任何空格。（当然，您可以将其包含在一行中。）
   p(style='white-space:pre;')
        mixin whiteSpacedLine(str,className)
          |  #{'\n\t\t' + ' '.repeat(8-str.length)}#{str}: #[span(class=className)]
      +whiteSpaceLine('One','A')
      +whiteSpaceLine('Two','B')
      +whiteSpaceLine('Three','C')
      +whiteSpaceLine('Four','D')

  p(style='white-space:pre;')
            mixin whiteSpacedLine(str,className)
              |  #{'\n\t\t' + ' '.repeat(8-str.length)}#{str}: #[span(class=className)]
            -
              var vals = [
                     {char: 'A', num: 'One'},
                     {char: 'B', num: 'Two'},
                     {char: 'C', num: 'Three'},
                     {char: 'D', num: 'Four'}
                     ];
            - each item in vals
              +whiteSpacedLine(item.num,item.char)
            |#{'\n\t\t'} blah blah blah