Scroll Text Left on Overflow for Element with ContentEditable="true"

Question

I have an editable span where I want the text to scroll to the left when it overflows. The behavior I am after is the same as with an input type="text" element. That is, if you type too much to fit into the element, it starts scrolling to the left so that the last character is always displayed and the beginning characters are hidden.

Here's an example of what I am doing:

<style>
    .editable {
        position:absolute;
        background-color: lightgoldenrodyellow;
        cursor: text;
        display: inline-block;
        white-space: nowrap;
        top:100px;
        left:100px;
        width:200px;

    }
</style>

<span contenteditable="true" class="editable"></span>

The problem is over-flow results in text outside the element; I want it to scroll to the left as described above. Is this possible?

If anyone is tempted to ask why don't I just use an input element, the reason is I need to set the innerHTML to provide some formatting such as color coding of words. That is my motivation for doing this, so if you have an alternative over a contenteditable element, I am open to it. Thanks.

Answer 1

overflow:hidden helps:

.editable {
  background-color: lightgoldenrodyellow;
  cursor: text;
  display: inline-block;
  white-space: nowrap;
  width: 100px; 
  overflow:hidden
}

<span contenteditable="true" class="editable">type here </span>