Как я могу сохранить отступ как границу элемента в contenteditable div?

Question

У меня есть спорный div, в котором у меня есть диапазон с фоном и отступами.

<div contenteditable="true">
      Blah content <span style="background:#efefef; padding:8px">my span</span> and some more content
</div>

Однако, согласно приведенному выше фрагменту, когда я перемещаю курсор от конца content к началу my каретка прыгает внутри отступ (Chrome 80.0.3987.132).

При движении в обратном направлении, перемещая каретку с начала and до конца span, она соблюдает заполнение и не перемещается внутри него.

Как можно Я сохраняю отступы как границу для элемента?

Answer 1

Вы можете смоделировать левый отступ, используя скрытый символ, где вы применяете letter-spacing

div {
  font-size: 50px;
}

span {
  background: #efefef;
  padding: 0 10px 0 0;
}

span:before {
  content: "a"; /* anything here */
  font-size: 0;
  letter-spacing: 10px;
}

<div contenteditable="true">
  Blah content <span>my span</span> and some more content
</div>

Answer 2

Курсор находится перед символом, с левой стороны есть пробел между контентом и промежутком, в котором находится курсор, от пробела с левой стороны, то же самое происходит на другой стороне, но выглядит иначе, потому что после конца диапазона есть пробел, перед которым находится курсор.

Предварительный просмотр:

Не думаю, что вы можете это изменить.