javascript - 插入符位置在可满足的 div 中偏离

Chrome(可能还有其他浏览器)以一种奇怪的方式在 contenteditable 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 中找到.

如果单击红色跨度旁边句点的右侧并按退格键删除句点，插入符号会突然移到段落的最右侧。我希望插入符号位于红色跨度旁边的句号所在的位置。

为什么它没有按我期望的方式定位，有没有办法获得我正在寻找的行为？

最佳答案

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

我创建了这个 fiddle :JsFiddle ，使用 display:inline，是我能从 display:block 得到的最接近的。

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

关于javascript - 插入符位置在可满足的 div 中偏离，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44596440/