在内容可编辑的div中插入符号的位置远未达到

Question

Chrome（可能还有其他浏览器）在可内容编辑的div中以一种奇怪的方式放置了插入符号。

请考虑以下代码段：

<div contenteditable="true" style="width: 100%; height: 200px; border: 1px solid black; overflow: auto;">
    <p>
        <span contenteditable="false" style="width: 75%; height: 80px; display: inline-block; border: 1px solid red;">&nbsp;</span>.
    </p>
</div>

在此JSFiddle中也可用。

如果单击红色跨度旁边的句点的右侧，然后按Backspace键删除该句点，则插入符号突然移至该段落的最右端。 我希望插入符号可以定位在该时期以前的位置，在红色跨度旁边。

为什么它没有按照我的期望进行定位，并且有办法获得我想要的行为？

Answer 1

由于p标签而发生这种奇怪的行为，原因可能是宽度之间存在一些冲突，您可以编辑标签的css，而不是使用display:block （默认），使用display:inline 。

我创建了这个小提琴：具有display:inline JsFiddle是我可以从display:block获得的最接近的提琴。

我尝试了align属性，但没有成功。

Answer 2

我相当有信心这是造成它的范围，因为在您删除甚至display: none它的那一刻display: none ，问题就消失了。 我自己对此很好奇，并做了一些搜索，这个人似乎和您有同样的问题。

为什么我的Contenteditable光标在Chrome中跳到结尾？

Answer 3

不间断空格就是它们听起来像的样子，即不会发生换行的空格。 您不应使用它们在单词，句子或元素之间添加空格。 特别是没有元素。

删除 （使用空格或将实际生成空格：D），一切都很好。