所以我有一个这样的设置:
<div style="width:130px; background-color:lime">
<div contentEditable style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
Hi I am a long piece of text, well sort of long lalalaa
</div>
</div>乍一看，这似乎是正确的，但在我开始键入比合适的文本更多的文本后，它只是添加了空格并将省略号左移.我不确定是什么原因造成了这种情况，也不知道如何使插入符号与文本一起移动.
看起来Chrome无法正确显示contentEditable功能和text-overflow: ellipsis;属性的组合.一种方法是，如果焦点在省略号上，就go 掉它.
(将增加的onblur="this.scrollLeft = 0"归功于@Somethinghere)
[contentEditable]:focus {
text-overflow: initial !important;
}<div style="width:130px; background-color:lime">
<div contentEditable onblur="this.scrollLeft = 0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
Hi I am a long piece of text, well sort of long lalalaa
</div>
</div>