Preserve line breaks in textarea

Question

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?

Kibitzer

Answer 1

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.

Reunionist

However, this also wraps the words if they exceed the width of the container, so it will not work on situations where you only want line break if the original text had a line break, and otherwise have overflow (horizontal scroll). In that situation, you can just use white-space: pre. – Supportable

Thanks this really works so great!! Just a small note, since I had this issue at the beginning: make sure that in your html you write the element which will have this property without any indentation, because if not it will show in the page as a blank space. – Inexplicable

Answer 2

The line breaks the user entered are preserved, neither html nor php simply drops or alters anything. However html markup, when rendered for visualization uses a different way to code line breaks. There are very good reasons for that. So what you have to do is "translate" the existing line breaks into html style line breaks.

How to do that depends on the environment you are working under. In general you have to translate line break codes like \n to <br> tags. The php scripting language offers a function for this for example: nl2br()

However take care: this only applies when rendering the text as html markup. This does not apply, when you output the text into a textarea inside a form again to allow changing it for example. In that case you have to preserve the original line breaks just as received.

So what you typically do is: you save the unaltered text input as received. When outputting that text again to a client, say after reading it from a database where you have saved it before, then you know the situation, how the text will be presented. That is when you either translate or leave the existing line breaks as they are.

You could also encode unaltered text containing line breaks by <pre>...</pre> tags, so mark them as to be rendered as preformatted. THis is for example done when displaying source code in html pages.

Argyrol

Why is this forum full of questions like this, all with similar answers, when I've been experiencing this issue on many different projects for about 5 years?! I've tried using javascript hacks, pre tags, CSS white space rules and nothing seems to work. Most of these projects have been Python webapps, using Flask or Pyramid and (of course) Javascript. And I usually debug in Chrome so that's the browser that seems to have the most trouble with this. Even typing in this comment field and hitting enter strips all line breaks! So how can so many people think this isn't an issue?!?! – Nitrogen

My apologies, I just noticed that indeed the line breaks are rendered again when you click edit...proving that they are sent to the server and saved in the DB. But I swear I've had this problem more times than I can count in the past. – Nitrogen

@Nitrogen Ok, great you got the idea behind things. As said: there are good reasons for those two types of expressing line breaks. Which does not say that there might no be filter steps in applications removing line breaks. All I stated is that there is no automatic filter or something similar in html or php. – Argyrol

My apologies, I didn't mean to come off as a self-righteous a$$, which I obviously have. My frustration is simply due to the fact that yes, many people have no problem with this, yet I do, and others obviously do too, hence them posting these questions. I guess we just don't really understand how line breaks are sent to the server etc. Could you please explain to me why placing a Javascript break point in Chrome dev tools, on the first line of a form submit handler, and inspecting the textarea's value shows "line one line two line three" instead of "line one\nline two\nline three"? – Nitrogen

@Nitrogen Line breaks sometimes get visualized as \n (or even \n\r): those are situations where a transformation step has actually been applied for the sake of readability and visualization. A normal line break is somewhat hard to visualize in a continuous text. It disrupts the text. So instead a "replacement character" is shown, a generally agreed upon sequence of printable characters meant to stand in place of a non printable character which would confuse otherwise. \n stands for "new line", that line break encoding is actually called a "new line character" (hex code 0x10). – Argyrol

I know all that, and so I'm expecting to see \n or whatever in the javascript values, but I'm seeing spaces instead. Is this a server or DB issue? I'm using Python/Pyramid and MySQL. BTW I should mention that I'm a web dev and am talking about a site I'm developing and testing on a local server...apologies for not making that clear earlier. – Nitrogen

Ah, sorry, I miss understood your previous comment. Sounds like that simply is the way that console displays non printable characters. Dunno. Best always is to dump the sequence in question into a hexeditor and take a look at what is really stored there. – Argyrol

@Nitrogen I'd say the only "issue" here is the fact that certain characters are "non printable" in the common sense. So in the way humans are expecting characters to look like. That means a crutch has to be used for us humans to be able to have an idea about what is going on. Certainly that is not a perfect thing, but better than nothing... – Argyrol

Hmm interesting...thanks I'll give that a go. Also just set a Python breakpoint on the server and noticed the value received there is definitely "line one line two line three" instead of "line one\nline two\nline three"...so I suspect JQuery, Javascript itself or something else on the client-side is getting in the way...anyway thanks for the help, I'll definitely try a hexeditor :-) – Nitrogen

Answer 3

You can do:

white-space: pre-wrap;
overflow-wrap: break-word;

Fivefold

Answer 4

You can avoid line breaks with white space if you like by registering an event listener on textarea fields like below:

$("textarea").off("keyup").on("keyup", e => { var t = $(e.target); t.val(t.val().replaceAll("\n", " ")); })

FYI: jQuery was used for that.

Roxy

Answer 5

You keep output in textarea as it is. You would receive input as a string output that string(write to file) that string adding textarea to the input string.

for eg.
<?php
$txt = $_POST["inputstr"];
$txt1 = "<textarea>". $txt ."</textarea>";
$file = fopen("file.html","a+");
fwrite($file, $txt1);
fclose($file);
?>

Astatine