Question

我有一些简单的东西，我想对齐。根据这个答案，我看到我可以使用white-space:pre; https://stackoverflow.com/a/6752736

所以我写了

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>

完全破坏了使用white-space:pre的重点。我可以用手清理它（见打击），但是没有一点使用玉。我没有使用HTML或玉。什么是最好的解决方法？用桌子？（如果是这样的话）使用ul？

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

Answer 1

唉，如果没有嵌套标签（即你的white-space:pre;），span和管道只能保留格式。为了使输出能够像管道和内联标签一样完全打印，你必须得到一些hacky并使用某种方式的转义字符串插值（#{}）来呈现内联JavaScript。

您需要的基本插值表达式是#{'\n\t\t'}，以确保它与标记对齐。与常规JavaScript一样，\n会将字符串返回到下一行的开头，因此需要\t s。

但是，有多种方法可以实现此插值。

内联

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

在您的示例中，所有以span为前缀的冒号都缩进了8个字符，因此您可以使用一些简单的数学和.repeat对它们进行排列，而无需弄清楚有多少空格的细节拥有。

功能

注意函数前面的-，这是运行一行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作为参数;似乎保留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')

Mixin + Iteration

也许是最简单的方法。如果您将vals数组分布在多行中，如下面的代码所示，请确保将它们包装在-下缩进的代码块中，并确保-没有任何空格之后。（当然，你可以将它包含在一行中。）

  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

在玉中对齐文字？

1 个答案:

内联

功能

密新

Mixin + Iteration