Text is missing When i use ellipsis inContent editable Div in Google chrome

Question

I am working on text-overflow: ellispsis property in google chrome. When i add more text to the div which is Content Editable, the whole text is missing.

Here is my code. http://jsfiddle.net/dineshk/ukwf8od7/

I am using 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

I know this is pretty old, but I ran into this issue and none of the answers here gave me what I wanted. The issue is occurring because when a contentEditable div becomes unfocused, it remains scrolled to whatever character position you were editing at, and if those characters were outside what can fit in the text box, they will now be hidden.

To get around this, you can scroll the div back to the left on blur.

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

See JsFiddle for example: http://jsfiddle.net/sawsym/5kaec481/3/

Answer 2

Demo

just a this text-overflow: clip; to div on focus

css

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

I guess this Demo should solve the problem, on unfocus taking the text-overflow back to ellipsis.

.edit:focus {
    text-overflow: clip;
}
.edit:not(:focus) {
    text-overflow:ellipsis;
}