当我在Google Chrome中使用省略号inContent可编辑Div时缺少文本

Question

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

我正在使用Google Chrome 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;
}