How can I display three line Instead of one line

Question

I was creating a note application on my website. there is the input code in my text area

<textarea class="form-control" rows="3" name="postBody"></textarea>

when I text in the text box I textbox:

123
345
789

-> which I wish to display this way with 3 lines,

but what I got the display was

123 456 789 

how can I fix this??

Answer 1

You could use white-space: pre-wrap property to show text with line breaks.

div {
    white-space: pre-wrap;
}

Example:

function sanitize(string) {
  const map = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#x27;",
    "/": "&#x2F;"
  };
  const reg = /[&<>"'/]/gi;
  return string.replace(reg, match => map[match]);
}
function display() {
  let elem = document.getElementById("content");
  document.getElementById("display").innerHTML = sanitize(elem.value);
}

    <textarea id="content">
123
      345
      789</textarea
    >

    <div id="display"></div>

    <button onclick="display()">Display</button>