input with ellipsis

Original: http://jsfiddle.net/simurai/TjGyz/

by Jens Grochtdreis

HTML

<input type="text" value="This element is an input" />
<div contenteditable>This element is a div.</div>

CSS

body { padding: 50px; }

input, div {
    width: 100px;
    border: 1px solid silver;
    padding: 5px;
    margin-bottom: 10px;
    outline: none;
    font: 20px sans-serif;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div:focus {
    border: 1px solid black;
    text-overflow: clip;
}

JavaScript

// Text input with ellipsis?

// Firefox: Works with <input>, doesn't scroll with contenteditable

// Opera: Doesn't work with <input>, works with contenteditable

// WebKit: Doesn't work in either. In the <div>: After typing and then clicking outside, the box is empty! Only works when the cursor is at the beginning.