css - 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 个范围内(由 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?