Preserve line breaks in textarea

html css textarea line-breaks
Simon M. picture Simon M. · Jun 2, 2015 · Viewed 72.2k times · Source

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?

Answer

Vaidotas Pocius picture Vaidotas Pocius · Jun 2, 2015

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.

Related questions

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Every time I develop a new form that includes a textarea I have the following dilemma when I need to specify its dimensions: Use CSS or use the textarea's attributes cols and rows? What are the pros and cons of …

Read More
How to autosize a textarea using Prototype?

I'm currently working on an internal sales application for the company I work for, and I've got a form that allows the user to change the delivery address. Now I think it would look much nicer, if the textarea I'm …

Read More
Set textarea width to 100% in bootstrap modal

Was trying all possible ways, but never succeeded: <div style="float: right"> <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button> </div> <!-- Modal --> &…

Read More