如何在用户添加内容时减小position left值，实现可编辑文本双向扩展？

嘿，这个问题我太懂了！你现在的代码里把文本的左边缘固定在了500px的位置，所以输入新内容时自然只能往右延伸。要实现像你说的双向扩展效果，核心是让文本的中心点固定在目标位置，而不是锁定左边缘。

下面是具体的实现方案：

核心思路 #

把元素的定位基准从左边缘改成中心点：

1. 用left: 50%让元素的左边缘对齐页面（或父容器）的水平中点
2. 用transform: translateX(-50%)把元素向左偏移自身宽度的50%，这样元素的中心点就正好落在页面的水平中点上
3. 保持contenteditable="true"让文本可编辑，此时输入内容就会向左右两边同时扩展了

修改后的完整代码 #

.text {
  position: absolute;
  left: 50%; /* 左边缘对齐容器中点 */
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现中心点对齐 */
  font-size: 28px;
  /* 可选：添加max-width限制文本最大宽度，避免太宽影响体验 */
  max-width: 80%;
  text-align: center; /* 可选：让文本始终居中对齐 */
}

<p contenteditable="true" class="text">text</p>

额外说明 #

• 如果你不想让文本居中在整个页面，而是固定在某个具体的像素位置（比如原来的500px处），可以把left: 50%改成left: 500px，同时保持transform: translateX(-50%)，这样文本的中心点就固定在500px的位置，输入内容时会向左右两边扩展。
• 加上text-align: center可以让输入的文本始终保持居中，视觉上更符合双向扩展的预期。

内容的提问来源于stack exchange，提问作者user8444404