Javascript contentEditable div中的对正，每个字母都有自己的元素

我有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>

s
o
M
E
T
E
x
T

我正试图使用

文本对齐：justify

对一些较长的文本进行对齐，但这不起作用。这很奇怪，因为

text align:center

和

text align:right

有效

在那之后，我尝试使用一个脚本，在每个空格中添加

右边距

，但当我在段落中写入新文本时，它崩溃了

---

如何使用JavaScript和/或JQuery实现这一点（并在每个元素中保存

id

和其他属性）？

您可以在末尾添加一个假单词，并使其

宽度为100%

和

显示：内联块

。如下：（根据您的要求更改父级的宽度）

{
宽度：300px；
文本对齐：对齐；
}
.有理.假词{
宽度：100%；
显示：内联块；
高度：0.1米；
}

s
o
M
E
T
E
x
T

对于这个问题，我认为flexbox方法是最好的选择。将

id

添加到您的

中，或赋予其样式，使其采用您想要的宽度，例如：

<div contenteditable="true" id="container">
    <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 with display:flex（有时是必需的）这应该会起作用。

严酷的答案是，如果您想要正常的justify行为，但保持所有跨度，那么要实现您想要的目标并不容易

但是如果你想尝试这样的事情，你需要制作你自己的脚本。要做到这一点，您需要循环遍历所有跨距，当您输入新行时（检查跨距与顶部的偏移量），您需要返回到最后一个空格，然后尝试对之前迭代的所有字符进行对齐。这可以通过将它们封装在新的span或div中并在其中进行调整来实现（封装div需要100%宽度）。要么只是使用css，要么通过改变空间跨度的宽度，使其仅扩展跨度

因此，要回答的问题是如何检查跨度的偏移：

---

很抱歉，如果不添加更多的span/div或删除span，就无法正确地证明我所看到的内容。

您所看到的内容是有效的，但由于几个原因，它无法与您所看到的文本一起显示

第一个原因是文本太短。您需要足够的时间使文本换行以显示对正

第二个原因是，通过在新行中放置span标记，在每行之间添加了一个空格。 试着把它放在同一条线上

像这样

<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>

一些文本

---

这里是一个示例工作

这里是一个JS+jQuery方法的示例，用于模拟在

contenteditable

元素中用跨距包装的字符的对齐方式。这只是一个概念的快速验证，仅在Chrome中进行测试，而且不彻底。此示例中未添加删除/撤消/复制/粘贴等功能

var选择器={
“包装器”：“可编辑”，
“段落”：“可编辑>p”，
“跨度”：“可编辑>p>跨度”
}
函数获取光标位置（元素）{
var caretofset=0；
var doc=element.ownerDocument | | element.document；
var win=doc.defaultView | | doc.parentWindow；
var-sel；
if（typeof win.getSelection！=“未定义”）{
sel=win.getSelection（）；
如果（选择范围计数>0）{
var range=win.getSelection（）.getRangeAt（0）；
var precretange=range.cloneRange（）；
预重排列。选择节点内容（元素）；
precretange.setEnd（range.endContainer，range.endOffset）；
CareTofset=precretange.toString（）.length；
}
}如果（（选择=文件选择）&&sel.type！=“控制”）{
var textRange=sel.createRange（）；
var precarteTextRange=doc.body.createTextRange（）；
PrecretTextRange.moveToElementText（元素）；
setEndPoint（“EndToEnd”，textRange）；
CareTofset=PrecretTextRange.text.length；
}
返回caretofset；
}
功能设置\光标\位置（pos）{
if（文档选择）{
sel=document.selection.createRange（）；
选择moveStart（'字符'，位置）；
sel.select（）；
}否则{
sel=window.getSelection（）；
选择折叠（$（选择器['spans']）[pos].firstChild，0）；
}
}
功能集\光标\位置\到\元素（el）{
if（文档选择）{
sel=document.selection.createRange（）；
选择moveStart（'字符'，位置）；
sel.select（）；
}否则{
sel=window.getSelection（）；
选择塌陷（el，0）；
}
}
函数调整（包装器选择器、子项选择器）{
可变线宽=0，
第一行字符=0，
包装器=$（包装器\选择器），
wrapper\u width=wrapper.width（），
children=$（children\u选择器），
上次找到的空间的位置，
在最后找到的空间处填充线宽度；
//刷新
children.removeAttr（“padding right”）.removeClass（“隔开的第一行字符最后一行空格”）；
对于（变量空间位置=[]，l=children.length，children=0；children=包装宽度）{
剩余空间=包装宽度-最后找到的空间处的填充线宽度；
line_chars_extra_margin=剩余空间/（空间位置.length-1）；
对于（边距i=0；边距i<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>

<div id="d1" contenteditable="true">
 <p id="p1">
  <span class="word">
    <span id="s1">S</span>
    <span id="s2">o</span>
    <span id="s3">m</span>
    <span id="s4">e</span>
  </span>
  <span id="s5">&nbsp;</span>
  <span class="word">
    <span id="s1">S</span>
    <span id="s2">o</span>
    <span id="s3">m</span>
    <span id="s4">e</span>
  </span>
 </p>
</div>