<div id="lineCount"></div>
<div contentEditable id="content"></div>
#content {
text-align: left;
resize: none;
min-height: 2.5rem;
max-height: 400px;
width: 100%;
overflow-y: auto;
display: inline-block;
border: solid 1px #B7B7B7;
white-space: pre-wrap;
word-spacing: 0;
word-wrap: break-word;
box-sizing: border-box;
margin-top: -1px;
}
window.onload = function () {
content.addEventListener('keyup', function(e) {
lineCount.textContent = e.target.textContent.match(/\n/g).length;
});
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.