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 = { "&": "&amp;", "<": "&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>