Text-align:justify 仅适用于缩进（复杂）的 HTML 代码，不适用于没有空格的 HTML 代码

Question

我正在维护一个在线报纸编辑器，我偶然发现了一个奇怪的问题，其中文本不希望使用 text-align:justify 来对齐。经过几个小时的调试，我注意到它可能与输出的 HTML 缩进有关（这对我来说听起来很奇怪）。

显然我的编辑器页面的原始 HTML 输出没有缩进，但文本字段的基本结构如下：

<div>
  <p>
    <span>
      <span>
        <span>
          Hello&nbsp;
        </span>
      </span>
    </span>
    <span>
      <span>
        <span>
          World.
        </span>
      </span>
    </span>
  </p>
</div>    

每个单词都包含在 3 个 span 中（由 JS/jQuery 渲染，用于浏览器之间的样式、字体和一致性），我将 text-align:justify; 放在 <p> 元素中。

以下是一些示例代码： https://jsfiddle.net/tdje0a9L/

如您所见，文本不合理。

但是现在，当我缩进完全相同的 HTML 代码时，它变得合理：
https://jsfiddle.net/3v7vk24d/

我不能对多跨度包装做太多事情，这就是编辑器的工作方式。

现在是我的问题：

• 有没有办法让输出的 HTML 缩进？

  （使我的文字合理）

  或

• 还有其他方法可以使我的文本合理吗？

Answer 1

这是因为您的源代码中有 （不间断空格）实体 - 这意味着您的代码确实没有单词之间的空格。

所以对于text-align: justify，它似乎是一个词。

您的示例将打印：Donec quam felis 作为一个单词

您可以在此问题中查看有关如何删除不需要的实体的更多信息：How to remove   from the end of spans with a given class?