Text-align:justify 仅适用于缩进(复杂)HTML 代码,不适用于 HTML 没有空格的代码
Text-align:justify only works on indented (complicated) HTML code, not on HTML code without whitespaces
我正在维护一个在线报纸编辑器,我偶然发现了一个奇怪的问题,其中文本不想使用 text-align:justify 进行对齐。经过几个小时的调试,我注意到它可能与输出 HTML 缩进有关(这对我来说听起来很奇怪)。
显然,我的编辑器页面的原始 HTML 输出没有缩进,但文本字段的基本结构如下:
<div>
<p>
<span>
<span>
<span>
Hello
</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 缩进吗?
(让我的文字合理化)
或
还有其他方法可以让我的文字合理化吗?
这是因为您的源代码中有
(不间断的 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 输出没有缩进,但文本字段的基本结构如下:
<div>
<p>
<span>
<span>
<span>
Hello
</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 缩进吗?
(让我的文字合理化)
或
还有其他方法可以让我的文字合理化吗?
这是因为您的源代码中有
(不间断的 space)实体 - 这意味着您的代码确实没有 space 字与字之间。
所以对于 text-align: justify
它接缝是一个词。
您的示例将打印:Donec quam felis
作为一个单词
您可以在这个问题中查看更多信息,了解如何删除不需要的实体:How to remove from the end of spans with a given class?