为什么在 Chrome 中，当受约束时，带有截断的 contentedible div 会添加空格

Question

所以我有这样的设置：

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

起初这似乎工作正常，但当我开始输入超出适合范围的文本后，它只是添加空格并将省略号向左移动。我不确定是什么原因导致此问题或如何使插入符号随文本向右移动。

Answer 1

将宽度更改为 100%， 去除溢出， 并设置空白换行

<div style="width: 100%; background-color:lime">
   <div contentEditable style=" white-space: wrap;">
      Hi I am a long piece of text, well sort of long lalalaa
    </div>
</div>

Answer 2

Chrome 似乎无法正确显示

contentEditable

功能和

text-overflow: ellipsis;

属性的组合。如果焦点位于省略号上，一种方法是删除省略号。

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