Dinesh Kanivu Dinesh Kanivu - 4 years ago 130
CSS Question

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

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 Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download