涉及 Closure 命令和“text-align:justify”的奇怪行为

Posted 2023-03-17

【中文标题】涉及 Closure 命令和“text-align:justify”的奇怪行为

【英文标题】：Strange behaviour involving Closure commands and "text-align:justify"

【发布时间】：2018-04-01 03:49:44

【问题描述】：

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

以下是有效的方法：

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>

哒哒！这就是它的样子（添加了坚固的边框，使其更清晰）：

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

问题出在这里：

如果我将 div 粘贴在任何 Closure 命令（if、for 等）中，如下所示：

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

a、b、c div 将全部落在左侧的默认内联块行为。看起来像这样：

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

<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 div 将继续默认向左。在内联行的剩余空间中，1、2、3 个 div 将非常合理：

如果我颠倒顺序，把常规的 div 放在第一位，然后 Closure div 放在第二位，那么结果非常相似，但是 a、b、c 会集中在右边而不是左边。

---

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

另一点——所有其他文本对齐值都有效。如果我将 justify 更改为 text-align:center，所有六个 div 将很好地放在中心。 text-align:left/right/etc..

模板和 justify 是如何计算/编译的，我不理解吗？闭包命令会产生某种秘密隐藏的 div 吗？

【参考方案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>