浏览器忽略运行时生成内容的理由答案

【问题标题】：Browsers ignore justification for runtime generated content浏览器忽略运行时生成内容的理由
【发布时间】：2014-02-12 03:05:18
【问题描述】：

在容器内均匀分布内容块的一个常见技巧是给它们一个display:inline-block CSS 属性，然后将text-align:justify 应用到父容器，所以：

<section>
  <div></div><!-- repeat X times -->
</section>

还有 CSS：

section {
    text-align:justify;
}
div {
    width:200px;
    height:50px;
    display:inline-block;
}

这适用于所有浏览器，包括 IE8+、as shown in this sample Fiddle。由于我没有设置text-align-last，所以最后一行恢复为左对齐，这很好，而且 Webkit stable 不支持。

但是，如果您现在开始使用 Javascript 生成额外的 div 元素，布局引擎似乎完全忘记了对齐。

Refer to this second Fiddle which includes a periodical function adding a div every second。我已经在 Chrome beta、Firefox 最新版、IE10 和 IE11 中对此进行了测试——所有这些都首先完全搞砸了最后一行，根据先前可用的空间对生成的内容进行半对齐，然后将所有以下元素左对齐。

我已经尝试了 Firebug 和 IE/Chrome 开发工具中的所有内容，更改和重置属性，但无法以任何方式触发“重新调整” - 他们接受 text-align:right，但如果您随后将其重置为 text-align:justify它只是再次跳回左对齐。玩white-space、letter-spacing 和word-spacing 只是没有明显的效果。

据我所知，relevant section in the W3 CSS standards 没有为这种行为提供任何理由（双关语）。

是否有针对此问题的修复或解决方法？

【问题讨论】：

最后一行的东西对于对齐的文本来说是正常的。由于段落的最后一行可能比其余的要短，因此试图证明它的合理性在排版上看起来很奇怪。动态生成元素的东西真的很奇怪。更奇怪的是它发生在所有浏览器中。

标签： javascript css justify

【解决方案1】：

本质上，每个 div 之间都需要一个空格，就像 HTML 中的一样。

所以做类似的事情（我不熟悉mootools，所以可能有更简单的方法）

(function(){
    $('root').grab(new Element('div'));
    $('root').grab(new Element('span', {
        'text': ' '
    }));
}).periodical(1000);

参见http://jsfiddle.net/AdLuT/1/（在 FF 和 IE 中完美，在 Chrome 中略显不足，这表明那里存在不同的问题。）

【讨论】：

哇，英雄——我确实完全忽略了这一点。确实是附加一个空格的问题，顺便说一下.appendText(' ')，见updated simplified fiddle here。很好奇 Chrome 确实还有几个像素差。
啊，对了，忘记了。我想知道 CSS 是否有办法将每个元素视为一个“单词”，而无需添加空格。
将 text 设置为两个空格似乎在 Chrome 中完美排列
@DaggNabbit 几个月后，您应该可以结合justify-content 普遍使用弹性盒来解决这个问题。
Wth，用 2 个空格而不是 1 个空格确实可以正常工作 - 所以 Chrome 中仍然存在某种错误。