javascript – How can I make line breaks behave in a div similar to textarea?


There is a textarea into which the text is manually driven in, after which you can click the button and the data is displayed in a div block. All line breaks are indentation, etc. transferred without problems.
Implemented with elem.value.replace(/(\n|\r)+/g, '<br>');

The problem is that if textarea to write a long indivisible word or a set of characters, but no spaces, the textarea text is automatically transferred to the next line when the edge of the field, and during transfer to the div , this transfer is not saved and the contents gets beyond block.

How do I make these line breaks appear in the 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;
<textarea autofocus></textarea>
Scroll to Top