I want to create a contenteditable element that starts with a small width and expands as more content is added, eventually clipping the overflow. I also want this element to automatically scroll back to the beginning like a regular text box would.
Setting the caret position at the start of the content does not achieve the desired scrolling effect. Another approach I tried was clearing the content temporarily and then restoring it using setTimeout after 1ms, but this feels like a messy solution.
Using a textbox is not an option because I only want the content to be editable after a double-click event. Can someone please provide assistance?
Here is the HTML code:
<section contenteditable='true'>Edit me!</section>
And here is the CSS code:
section {
background-color:#ccc;
display:inline;
white-space:nowrap;
max-width:100px;
position:absolute;
overflow:hidden;
padding:10px;
}
View the example here.