位置绝对可编辑的长内容问题

Question

请选中DEMO，然后在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插件。 editor screenshot

编辑：我已使用启用jQuery UI拖动的方式更新了演示，以避免混淆。 contenteditable是可拖动和可编辑的。

Answer 1

如果您想在需要时使文本向左流动，为什么不只使用右对齐的文本呢？

test

这将迫使文本仍保留在右侧，但允许出现溢出的情况。

示例：https://jsfiddle.net/5kgq7Lh1/

Answer 2

两种解决方案

1. 摆脱.voucher-background，因为这就是您看到的向左推动的内容。在固定的密闭空间中将同级标签设为100％x 100％的逻辑是什么？在演示中，我将蓝绿色背景移到了应该放置的位置：.voucher-template。顺便说一句，此凭证号有多少，因为在一定长度下您不能拖动可编辑内容，因为它包含其中。

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

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

---

演示

$('.content-editable').draggable({
  containment: 'parent'
});

body {
  background-color: #ddd;
}

.voucher-template {
  width: 500px;
  height: 250px;
  position: relative;
  border: 2px solid #808080;
  overflow: hidden;
  /* This was moved from that useless .voucher-background */
  background-color: teal;
}

.voucher-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content-editable {
  position: absolute;
  top: 90px;
  left: 350px;
  /* right: 0 */
  font-size: 30px;
  color: #fff;
  border: 2px dashed gray;
  &:hover {
    cursor: move;
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>