I have a form with a textarea and I want to preserve line breaks entered by the user when outputting the content.
For exemple, if I write in textarea :
Here is a sentence. Here is another. here is one more.
This is a new paragraph. Here is a new sentence. Here is another.
I want the same output and not :
Here is a sentence. Here is another. here is one more. This is a new paragraph. Here is a new sentence. Here is another.
How could I preserve line breaks?
To preserve line breaks when getting text from a textarea with JavaScript, we can replace whitespace characters with '<br>\n' .
Just put the output text between <pre></pre> tags, that will preserve the line breaks.
Preserve Newlines, Line Breaks, and Whitespace in HTML If you want your text to overflow the parent's boundaries, you should use pre as your CSS whitespace property. Using white-space: pre wraps still preserves newlines and spaces. Enjoy!
\n is the linefeed character literal (ASCII 10) in a Javascript string. <br/> is a line break in HTML. Many other elements, eg <p> , <div> , etc also render line breaks unless overridden with some styles.
Generally you just need to add
white-space: pre-line;
whitespace trimmed to single whitespace or
white-space: pre-wrap;
all whitespace preserved
to the element's style (CSS), where you want your text rendered with line-breaks.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With