删除药丸旁边的最后一个字符

Question

我在一个令人满意的元素（div）中有一个药丸和文本。但是，在删除药丸旁边的最后一个字符后，插入符号会跳转到contenteditable元素的右边缘。如何避免插入符号（偏移）？

HTML：

<div class='container' contenteditable="true">
  <div class='pill' contenteditable="false" >Andy Green</div>Text B
</div>

CSS

.container {
  border: 1px solid black;
}
.pill {
  background-color: #b2ffb2;
  border-radius: 25px;
  display: inline;
  padding: 0 5px;
}

的jsfiddle： https://jsfiddle.net/3sn4emj0/10/

Answer 1

我靠运气解决了我的问题。只需在药丸后加一个空！

<div class='container' contenteditable="true">
 <div class='pill' contenteditable="false" >Andy Green</div><span></span>Text B
<span></span>
</div>

详情请见JsFiddle。 https://jsfiddle.net/3sn4emj0/12/