Jade puzzle：强制空白显示给最终用户（ft.Angular）

Question

Jade是一款非常干净的发动机。这是我经常遇到的一个难题。

我的问题是：输出没有空格!!所有元素都恰到好处地相互作用。

我正在尝试同时完成一些事情：

• 英文内容以后再用i8ln
• 没有内联等HTML
• 班级中的样式
• 内联角度特殊模块

我要粘贴我写过的同一块Jade的多个版本 - 它们都为最终用户“工作”，我不喜欢所有这些版本，并且对它们都感到羞耻。

请撕开他们，告诉我我错过了什么！非常感谢。

尼克

版本1

我最不喜欢的是严重滥用 标签。这个标签可能在投票数和单词投票之间是合适的，但是我仍然希望使用css white-space。

h2 {{voteTotalTrue}} 
  ng-pluralize(count="votesFor['Joe']", when="{'1':'Vote','other':'Votes'}")
  span  for 
  span.candidate Joe

第2版

我最不喜欢的是它很脆弱。它的工作原理是因为我小心翼翼地将空白放置在迫使Jade保留它的地方，但这是一个相当标准的风险，在这期间，其中一些差距将被忽略。

h2
  span {{voteTotalTrue}}
  ng-pluralize(count="votesFor['Joe']", when="{'1':' Vote','other':' Votes'}")
  span  for
  span.candidate  Joe

Answer 1

要强制Jade尊重您的空格，请显式输出带空格的字符串：

span= ' for '

这是最简单的方法。

dobesv在this gist中总结了Jade的各种空白技巧和陷阱。