我正在维护一个在线报纸编辑器,我偶然发现了一个奇怪的问题,其中文本不想使用 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 缩进吗?
(让我的文字合理化)
或
还有其他方法可以使我的文本对齐吗?
最佳答案
这是因为您的源代码中有
(不间断空格)实体 - 这意味着您的代码确实没有单词之间的空格。
所以对于 text-align: justify
来说,它接缝是一个词。
您的示例将打印:Donec quam felis
作为一个词
您可以在这个问题中查看更多信息,了解如何删除不需要的实体:How to remove from the end of spans with a given class?
关于css - Text-align:justify 仅适用于缩进(复杂)的 HTML 代码,不适用于没有空格的 HTML 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31878338/