index.html

<div id="ta" contentEditable="true"></div>

script.js

var ta = document.getElementById("ta");
ta.addEventListener("keyup", foo, false);

function foo(e) {
  var text = e.target.innerText;
  if (text.length >= 10) {
    f = text.slice(0,10);
    str = f + "<em>" + text.slice(10) + "</em>";
    e.target.innerHTML = str;
    range = document.createRange();
    range.selectNodeContents(ta);
    range.collapse(false);
    selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

style.css

div {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
  line-break: word;
}
em {
  font-style: normal;
  color: red;
}

Twitter-Style-Textarea.markdown

Twitter Style Textarea

A Twitter-like text input that alerts you to some sort of text limit.

A Pen by Geoffrey Bell on CodePen.

License.