contentEditable div中的对齐,每个字母都有自己的元素

Question

我有contentEditable div,每个字母都有自己的元素,如:

<div contenteditable="true">
    <p id="p1">
        <span id="s1">S</span>
        <span id="s2">o</span>
        <span id="s3">m</span>
        <span id="s4">e</span>
        <span id="s5">&nbsp;</span>
        <span id="s6">t</span>
        <span id="s7">e</span>
        <span id="s8">x</span>
        <span id="s9">t</span>
    </p>
</div>

我试图证明使用更长的文本text-align: justify,但这不起作用.这很奇怪,因为text-align: center而且text-align: right有效.

之后,我试图使用添加margin-right到每个空间的脚本来做到这一点,但是当我将新文本写入段落时,它会崩溃.

如何id使用JavaScript和/或JQuery 执行此操作(以及在每个元素中保存和其他属性)？

Answer 1

您可以在末尾添加一个假词并将其设为width:100%and display: inline-block。像这样：（根据您的要求更改父级的宽度）

.justified {
  width: 300px;
  text-align: justify;
}

.justified .fake-word {
  width: 100%;
  display: inline-block;
  height: 0.1em;
}

<div contenteditable="true">
  <p id="p1" class="justified">
    <span id="s1">S</span>
    <span id="s2">o</span>
    <span id="s3">m</span>
    <span id="s4">e</span>
    <span id="s5">&nbsp;</span>
    <span id="s6">t</span>
    <span id="s7">e</span>
    <span id="s8">x</span>
    <span id="s9">t</span>
    <span class="fake-word"></span>
  </p>
</div>

编辑1：

如果您不想在字符之间留有空格，则可以删除所有 span 标签：

<div contenteditable="true">
      <p id="p1" class="justified">
         Some Text
        <span class="fake-word"></span>
      </p>
    </div>

编辑2：此外，您不必添加 .fake-word，还有另一种方法可以使用伪类来执行此操作：

 .justified:after {
      content: "";
      display: inline-block;
      width: 100%;
 }