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

Question

请检查DEMO 并在 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 插件。 editor screenshot

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

Answer 1

如果您想在需要时让文本进一步向左流动，为什么不直接使用右对齐文本呢？

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

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

示例：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>