涉及关闭命令和 "text-align:justify" 的奇怪行为

Question

我在 Soy 模板中有一些 divs，我希望它们在水平方向上均匀 spaced。

这是有效的方法：

CSS（本例简化命名）：

.list-of-things {
  position: relative;
  text-align: justify;
}

.list-of-things::after {
  display: inline-block;
  width: 100%;
  content: '';
}

.list-of-things div {
  display: inline-block;
  height: 25px;
  weight: 25px;
}

::after 规则只是添加一个假的最后一行，因为 justify 不会应用到最后一行。

HTML（大豆模板中）：

<div class="list-of-things">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Ta-da！这是它的样子（添加了边框实心度，以使其更清晰）：

JSFiddle 演示了这一点：http://jsfiddle.net/ULQwf/1257/

问题是：

如果我将 divs 插入任何闭包命令（if、for 等）中，如下所示：

{if true}
  <div>a</div>
  <div>b</div>
  <div>c</div>
{/if}

a、b、c divs 将全部落入左侧的默认 inline-block 行为。看起来像这样：

更奇怪的是，如果我把所有东西都放在一起，就像这样：

<div class="list-of-things">
  {if true}
    <div>a</div>
    <div>b</div>
    <div>c</div>
  {/if}
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

a,b,c divs会继续默认向左。在内联行的剩余 space 中，第 1、2、3 div 行将很好地对齐：

如果我颠倒顺序，将正则 div 放在第一位，然后将闭包 div 放在第二位，那么结果非常相似，但是 a、b、c 将被集中在一起右边而不是左边。

查看 Chrome 上的开发人员工具，每个 div -- a、b、c、1、2、3 -- 看起来完全相同的。相同的计算值。

还有一点 -- 所有其他 text-align 值都有效。如果我将 justify 更改为 text-align:center，所有六个 div 将很好地坐在中间。 text-align 相同：left/right/etc..

有什么关于模板和对齐方式 computed/compiled 我不明白的地方吗？关闭命令会产生某种隐藏在 div 周围的秘密吗？

Answer 1

发现：

text-align:justify 对空格敏感
Soy 模板在编译时不一定关心空格

基本上，这行不通：

<div>
  {if true}
    <div>a</div>
    <div>b</div>
    <div>c</div>
  {/if}
</div>

但这确实如此！

<div>
  {if true}
    <div>a</div>{sp}
    <div>b</div>{sp}
    <div>c</div>{sp}
  {/if}
</div>

涉及关闭命令和 "text-align:justify" 的奇怪行为

Strange behaviour involving Closure commands and "text-align:justify"

html

css

justify

google-closure-templates

soy-templates