Jquery 定位绝对内容可编辑长内容问题

请检查并在contenteditable元素上写一个长文本

每当contenteditable内容超出其父边界时，父div内容将向左推

<div class="voucher-template">
   <div class="voucher-background"></div>
   <div class="content-editable" contenteditable="true">
      sample text
   </div>
</div>

.voucher-template {
  width: 500px;
  height: 250px;
  position: relative;
  border: 2px solid #808080;
  overflow: hidden;
}
.voucher-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: teal;
}
.content-editable {
  position: absolute;
  top: 90px;
  left: 350px;
  font-size: 30px;
  color: #fff;
  border: 2px dashed gray;
 }

编辑：它实际上是一个凭证编辑器。可以拖动和移动contenteditable元素。我只是没有包括jqueryUI draggable和TinyMCE插件，因为这纯粹是html css问题，而不是js插件。

---

编辑：我已经更新了演示，启用了jquery ui Dragable以避免混淆。contenteditable是可拖动和可编辑的。

如果您试图在需要时使文本进一步向左流动，为什么不使用右对齐的文本

.content-editable {
    position: absolute;
    top: 90px;
    text-align: right;
    width: 100%;
    font-size: 30px;
    color: #fff;
    border: 2px dashed gray;
  }

这将强制文本仍然位于右侧，但允许出现溢出的情况

示例：

两种解决方案 摆脱。凭证背景，因为这是您看到的被推到左侧的内容。在固定的受限空间中，兄弟标签100%x 100%的逻辑是什么？在演示中，我将teal背景移到了它应该位于的位置。顺便问一下，这个凭证号有多大，因为在某个特定的长度上，您不能拖动可编辑的凭证号，因为它被包含在内

或者您可以删除left:350px，将其替换为right:0。接下来添加一个拖动事件处理程序，并将“右”和“下”设置为“自动”

演示 $'.content可编辑'.draggable{ 遏制：“家长” }; 身体{ 背景色：ddd； } .凭证模板{ 宽度：500px； 高度：250px； 位置：相对位置； 边框：2个实心8080； 溢出：隐藏； /*这是从那无用的背景移走的*/ 背景色：青色； } .凭单背景{ 位置：绝对位置； 排名：0； 左：0； 宽度：100%； 身高：100%； } .内容可编辑{ 位置：绝对位置； 顶部：90px； 左：350px； /*右：0*/ 字体大小：30px； 颜色：fff； 边框：2个灰色虚线； &：悬停{ 光标：移动； } } 示例文本

---

很抱歉，contenteditable元素是可拖动的，您可以将其放置在其父元素中的任何位置。我更新了问题。谢谢…我们仍然不知道你到底想做什么…向右扩展…换一行，向右对齐…？抱歉，请尝试演示。用很长的文本编辑contenteditable元素。问题是为什么父内容会向左移动。我已经更新了这个问题，请看屏幕截图。好的，它是固定的。抱歉，但contenteditable元素是可拖动的。顶部和左侧的位置是动态的。我无法定义位置：元素的右侧。我已经更新了这个问题，谢谢。是的，没有插件我帮不了你，因为你刚才说的毫无意义。

drag: function(event, ui) {
  $(this).css({
    "right": "auto",
    "bottom": "auto"
  });
}