Позиция абсолютно довольная долгая тема контента

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 редактор снимков экрана

РЕДАКТИРОВАТЬ: я обновил демо с включенным перетаскиванием jquery ui, чтобы избежать путаницы. contenteditable является перетаскиваемым и редактируемым.

Answer 1

Два решения

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>

Answer 2

Если вы пытаетесь сделать текст более левым, когда это необходимо, почему бы просто не использовать текст, выровненный по правому краю?

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

Это приведет к тому, что текст будет по-прежнему справа, но допустим случаи переполнения.

Пример: https://jsfiddle.net/5kgq7Lh1/