Как сделать поведение переносов строк в div аналогичным поведению в textarea?

Есть textarea в которую вручную вбивается текст, после чего можно нажать кнопку и данные выводятся в div блоке. Все переносы строк отступы и т.д. переносятся без проблем. Реализовано с помощью elem.value.replace(/(
|
)+/g, '
');.
Проблема заключается в том, что если в textarea написать длинное неразрывное слово или просто набор символов, но без пробелов, то в textarea текст автоматически переноситься на другую строку при достижении края поля, а при переносе в div этот перенос не сохраняется и содержимое вылезает за пределы блока.
Как сделать так, чтобы эти переносы строк отображались в div?

Ответ

document.addEventListener('input', function (e) { document.querySelector("div").textContent = document.querySelector("textarea").value; }) textarea, div { font-family: monospace; font-size: 1rem; display: block; width: 100%; box-sizing: border-box; border: 1px solid; padding: .5em; } textarea { margin-bottom: 1em; height: 7em; } div { white-space: pre-line; word-wrap: break-word; overflow-wrap: break-word; }