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

这是因为您的源代码中有  （不间断的 space）实体 - 这意味着您的代码确实没有 space 字与字之间。

所以对于 text-align: justify 它接缝是一个词。

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

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

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

Text-align:justify only works on indented (complicated) HTML code, not on HTML code without whitespaces

css

html

text-align

justify