var textContainer, textareaSize, input; var autoSize = function () { textareaSize.innerHTML = input.value + '\n'; }; document.addEventListener('DOMContentLoaded', function() { textContainer = document.querySelector('.textarea-container'); textareaSize = textContainer.querySelector('.textarea-size'); input = textContainer.querySelector('textarea'); autoSize(); input.addEventListener('input', autoSize); });
<div class="textarea-container"> <textarea></textarea> <div class="textarea-size"></div> </div>
.textarea-container { position: relative; width: 50%; } textarea, .textarea-size { min-height: 25px; font-family: sans-serif; font-size: 14px; box-sizing: border-box; padding: 4px; border: 1px solid; overflow: hidden; width: 100%; } textarea { height: 100%; position: absolute; resize:none; white-space: normal; } .textarea-size { visibility: hidden; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }