光标在可编辑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 中也提供了相应的内容。

如果你点击红色单词后面的句号的右边，并按下退格键删除该句号，光标会突然移动到段落的极右侧。我本来期望光标将定位在原来句号所在的位置，即紧挨着红色单词后面。

为什么光标没有按照我的期望定位，有没有办法让其按照我想要的行为表现呢？

- Spiff

Answer 1

这种奇怪的行为是由 p 标签引起的，可能是一些宽度之间的冲突导致的，您可以编辑标签的 CSS，不使用默认的 display:block，而使用display:inline。

我创建了这个 jsfiddle：JsFiddle，使用 display:inline，是最接近 display:block 的效果。

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

- Mathiasfc

Answer 2

我相当自信它是 span 导致的，因为一旦你将其删除或甚至使用 display: none，问题就会消失。我对此非常好奇，所以进行了一些搜索，这个人似乎和你有同样的问题。

为什么我的 Chrome 内容可编辑光标会跳到末尾？

- Cody McPheron

Answer 3

不间断空格就是它们听起来的样子 - 在此处不会发生换行的空格。您不应该使用它们在单词、句子或元素之间添加空格。尤其不是元素。

删除 (带有空格或实际上会产生空格:D)，一切都好了。

- Antonio Dimitrovski