在內容可編輯的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），一切都很好。