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;"> </span>.
</p>
</div>
也可在此JSFiddle中找到。
如果单击红色范围旁边的句点右侧并按退格键删除句点，则插入符号突然移至段落的最右侧。我希望插入符号位于红色范围旁边的时间段。
为什么它没有按照我的预期定位，是否有办法获得我正在寻找的行为？
答案 0 :(得分：2)
这种奇怪的行为正在发生，因为display:block标签，原因可能是宽度之间存在冲突，您可以编辑标签的css，而不是使用display:inline（默认），使用{ {1}}。
我创建了这个小提琴：JsFiddle，display:inline，是display:block最接近的。
我尝试了align属性，但我没有成功。
答案 1 :(得分：1)
我相信这是导致它的跨度，因为当你删除它甚至display: none时，问题就会消失。我自己对此非常好奇并做了一些搜索，这个人似乎和你有同样的问题。
Why Is My Contenteditable Cursor Jumping to the End in Chrome?
答案 2 :(得分：1)
不间断的空间就是它们听起来的样子 - 不会发生换行的空间。您不应该使用它们在单词，句子或元素之间添加空格。特别是不是元素。
删除＆amp; NBSP; （有空间或实际上会腾出空间：D）一切都很好。