Why does contentedible div with truncation add whitespace in Chrome when constrained

Question

So I have a setup like this:

<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>

At first this seems to work correctly but after I start typing more text than fits, it just adds whitespace and moves the ellipsis left. I am not sure what is causing this or how to make the caret move right with the text.

Answer 1

It looks like Chrome cannot correctly display the combination of the contentEditable feature and the text-overflow: ellipsis; attribute. One approach would be to remove ellipsis if the focus is on it.

(Credits to @somethinghere for the addition onblur="this.scrollLeft = 0")

[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>