2017-06-16 127 views
2

Chrome(也可能是其他瀏覽器)將插入符以一種奇怪的方式放置在contenteditable div中。插入符號位置在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也可用。

如果您點擊紅色範圍旁邊的時間段的右側並按退格鍵刪除時間段,插入符突然移動到段落的最右側。我希望插入符號位於過去的時間位置,旁邊是紅色的跨度。

爲什麼它沒有按我期望的方式定位,並且有沒有一種方法可以獲得我正在尋找的行爲?

回答

2

這個奇怪的行爲是因爲p標籤發生的,原因可能是寬度之間有些衝突,你可以編輯標籤的css而不是使用display:block(默認),使用display:inline

我創造了這個小提琴:JsFiddle,與display:inline,是最接近我可以從display:block得到。

我試過align屬性,但我沒有成功。

1

非打破空間是正是他們聽起來像 - 在那裏不會發生斷行空格。你不應該用它們在單詞,句子或元素之間添加空格。尤其不是元素。

刪除& nbsp; (有空間或實際上會佔用空間:D),一切都很好。

相關問題