html - 文本丢失当我在 Google chrome 的内容可编辑 Div 中使用省略号时

Question

我正在研究谷歌浏览器中的 text-overflow: ellispsis 属性。当我向内容可编辑的 div 添加更多文本时，整个文本都丢失了。

这是我的代码。 http://jsfiddle.net/dineshk/ukwf8od7/

我使用的是谷歌浏览器 35 +

HTML

<div contenteditable="true" class="edit">This is a Test case,Its a testing text not actual text</div>

CSS

.edit {
    width:150px;
    height:20px;
    background:#dcdcdc;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

Answer 1

我知道这已经很老了，但我遇到了这个问题，这里的答案都没有给我想要的东西。出现此问题是因为当 contentEditable div 失去焦点时，它仍然滚动到您正在编辑的任何字符位置，如果这些字符超出文本框的范围，它们现在将被隐藏。

要解决此问题，您可以在模糊时将 div 滚动回左侧。

function scrollBack (el) {
   el.scrollLeft = 0;
}

例如参见 JsFiddle:http://jsfiddle.net/sawsym/5kaec481/3/