Preserve line breaks in textarea

HtmlCssTextareaLine Breaks

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

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.

Solution 2 - Html

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.

Solution 3 - Html

You can do:

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

Solution 4 - Html

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);
?>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSimon M.View Question on Stackoverflow
Solution 1 - HtmlVaidotas PociusView Answer on Stackoverflow
Solution 2 - HtmlarkaschaView Answer on Stackoverflow
Solution 3 - HtmlEden SharvitView Answer on Stackoverflow
Solution 4 - HtmlawadheshView Answer on Stackoverflow