Javascript 如何在溢出时将元素左右两侧的文本水平等分？

当用户在div中键入文本时，我试图为div内容实现以下效果（

contentEditable=“true”

）。

.editor{
宽度：200px；
高度：200px；
大纲：0；
位置：绝对位置；
左：25%；
边框：1px纯绿色；
}

在这里键入。。。

您是指以下内容吗：

var contents=document.getElementsByClassName（'content'）；
for（设i=0；i

.editor{
宽度：200px；
高度：200px；
大纲：0；
位置：相对位置；
左：25%；
边框：1px纯绿色；
}
.p.编辑{
空白：nowrap；
位置：绝对位置；
z指数：1；
宽度：自动；
最小宽度：var（--内容宽度）；
最高：50%；
左：计算（-1*（变量（--内容宽度）/4））；
}

---

在此处键入…
您是指以下内容吗：


var contents=document.getElementsByClassName（'content'）；
for（设i=0；i

.editor{
宽度：200px；
高度：200px；
大纲：0；
位置：相对位置；
左：25%；
边框：1px纯绿色；
}
.p.编辑{
空白：nowrap；
位置：绝对位置；
z指数：1；
宽度：自动；
最小宽度：var（--内容宽度）；
最高：50%；
左：计算（-1*（变量（--内容宽度）/4））；
}
在这里键入…
像这样的东西怎么样


.editor{
宽度：200px；
高度：200px；
大纲：0；
位置：绝对位置；
左：25%；
边框：1px纯绿色；
换字：正常；
}
.p.编辑{
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
}
在这里键入…
像这样的东西怎么样


.editor{
宽度：200px；
高度：200px；
大纲：0；
位置：绝对位置；
左：25%；
边框：1px纯绿色；
换字：正常；
}
.p.编辑{
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
}
在此处键入…
将此添加到您的代码中

将此添加到代码中。
这是什么


。输入大纲{
宽度：100px；
保证金：25像素自动；
边框：1px纯绿色；
位置：相对位置；
高度：500px；
}
输入{
宽度：300px；
边界：无；
位置：绝对位置；
最高：50%；
左-100%；
转化：translateY（-50%）；
背景：透明；
}

这个怎么样


。输入大纲{
宽度：100px；
保证金：25像素自动；
边框：1px纯绿色；
位置：相对位置；
高度：500px；
}
输入{
宽度：300px；
边界：无；
位置：绝对位置；
最高：50%；
左-100%；
转化：translateY（-50%）；
背景：透明；
}

只有一个问题是，在回车时，下一行与第一行重叠@“你绝对是对的，@Sagar Kharche，谢谢。我想说的是，这只能作为一个解决方案，满足单行输入需求。需要一些JS才能在换行符上相应地分隔/定位新的
标记。只有一个问题是，在回车时，下一行与第一行重叠@“你绝对是对的，@Sagar Kharche，谢谢。我想说的是，这只能作为一个解决方案，满足单行输入需求。需要一些JS才能在换行符上相应地分隔/定位新的
标记。
p {
  position: relative;
  right: 100px;
  width: 400px;
  text-align: center;
}