59

How do I save user-entered line breaks from a <textarea> HTML element to a database?
It always removes the line breaks.

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
  • Which database, What datatype in the database, How are you inserting the data, How does the data show in the database's native tools, Is there another reason why you think the embedded linebreaks aren't there? – Rowland Shaw Jan 31 '09 at 08:00

9 Answers9

121

TextArea HTML element is preserving the white space in the database.
The problem appears when trying to display the \n on the web browser, which will fail.

To display \n in the web browser use :

<p style="white-space: pre-line">multi-line text</p>
Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
35

When displaying the content you need to convert line breaks into <br /> tags, otherwise the web browser won't display them. This is probably why you think they aren't being saved. If you're using PHP, use the nl2br() function to do this. In other languages you could do a string replace, replacing all occurrences of "\n" with "<br />".

Paige Ruten
  • 172,675
  • 36
  • 177
  • 197
  • 3
    You should clarify that you mean "when displaying content *outside of* a – Tomalak Jan 31 '09 at 08:49
  • You should include Lode Alaert's solution as well. Sometimes a 
     tag is what you want.
     – bennlich Jul 15 '16 at 19:58
24

Just put the output text between <pre></pre> tags, that will preserve the line breaks.

Hakan Fıstık
  • 16,800
  • 14
  • 110
  • 131
Lode Alaert
  • 671
  • 6
  • 6
  • 7
    Or add white-space: pre-line to CSS element – Kantoci Dec 23 '16 at 10:58
  • 4
    The CSS _white-space: pre-line;_ option is the best because the 
     tag does not wrap lines of text. 
     has a default styling of _white-space: pre;_  which I do not think is desired in this case.
     – Eric Jan 08 '18 at 22:26
8

I just learnt to use php's nl2br function and it is working fine for me. I'm using it to style how my users receive an email when sent from another user.

John Kariuki
  • 4,966
  • 5
  • 21
  • 30
4

Your problem will be solved using 'white-space' property: simply use:

<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>

And continue your work.

Zahid Ibrahim Shaikh
  • 63
  • 1
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 17 '21 at 09:37
2

I know from experience that Browser text areas are less well-behaved than one would like, especially with regard to line breaks.

You could can to see if javascript would be able to interrogate the text area and find the line breaks before the text is sent to the server and so send the data in a more well-formatted way. But the amount of javascript debugging necessary to make this work across multiple browsers is probably not worth the effort.

Perhaps you should say that format you are trying to capture your data. There may be a better way to get the data than keeping track of line-breaks - though lines breaks can seem like any easy thing to capture in user input.

Joe Soul-bringer
  • 3,294
  • 5
  • 31
  • 37
1

I noticed that breakable content saved normally if textarea is inside a html form. But if I use textarea without any form and try to edit a long text in it, insert line breaks and save content via ajax, it's saved as a merged text into database

mogilka
  • 135
  • 15
1

Use PHP nl2br() Function while saving data from textarea to database like below

<textarea 
    name="PostContent" 
    class="form-control" 
    rows="12" cols="30"
    id="PostContent" 
    required=""
    style="white-space: pre-wrap; text-indent: 50px;"
    >
</textarea>

$PostContent=$_POST["PostContent"];
$output =nl2br($PostContent);

use $output variable to save to Database

Martin Brisiak
  • 3,872
  • 12
  • 37
  • 51
Manju Anand
  • 11
  • 1
0

you can add text in the text area and see the formatted text below.

function ex() {
  const text = document.getElementById("description").value;
  const ss = document.getElementById("add");
  ss.textContent = text;
}
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
</br>
<button onclick="ex();">check</button>
</br>
<p style="white-space: pre-line" id="add"></p>
<style>
p {
 color: red;
 text-align: center;
} 
   </style>
sonu sharma
  • 39
  • 1
  • 3