101

I have a string say

string display_txt = "1st line text" +"\n" + "2nd line text";

in Jquery, I am trying to use 

('#somediv').html(display_txt).css("color", "green")

quite clearly I am expecting my msg to be displayed in 2 lines, but instead \n is being displayed in the message. Any quick fixes for that?

Thanks,

Improve this question
4
  • 1
    Quite clear, answer is in your question, you are trying to render the error message in div as html, so you can use <br /> tag Commented Dec 20, 2011 at 10:21
  • There is nothing "quite clear" in expecting two lines. On the contrary, it is quite clear that the newline will be rendered as plain space, only wrapping the line if needed. It is how HTML works, of course it is also how .html works. Commented Dec 20, 2011 at 10:24
  • 3
    I just meant with the context where i have stored my string as "1st line text" and "2nd line text" , it was clear that i want these in 2 lines, not with respect to how html works:) thank you. Commented Dec 20, 2011 at 10:48
  • related: stackoverflow.com/questions/9726970/… Commented Sep 17, 2019 at 21:11

5 Answers 5

Reset to default
202

Set your css in the table cell to

white-space:pre-wrap;


document.body.innerHTML = 'First line\nSecond line\nThird line';
body{ white-space:pre-wrap; }

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

so isn't this supposed to be the accepted answer? LE: I see that this is only supported in IE 8+ link
This answer is way better than setting the innerHTML, because it doesn't cause a XSS vulnerability.
Besides, you can use white-space:pre-line; as sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks. More information on: https://www.w3schools.com/cssref/pr_text_white-space.asp
This answer does not convert \n within text to a newline
@ste_irl - what do you mean? the \n means a new line should be printed and it does print it
85

Use <br /> for new line in html:

display_txt = display_txt.replace(/\n/g, "<br />");
Improve this answer

5 Comments

for some reason, I've to escape the "\n" as "\\n" or else it doesn't work. (tested in Chrome 46). Any reason why?
Please note that this will only replace the first occurence of the \n character inside the string. See the MDN documentation
best .replace(/\n/g, "<br />") is prevent more newline.
I think @vsync 's answer should be the accepted one.
@SujayPhadke for some reason it's just printing \n as text when I try to escape :-(
11

You could use a pre tag instead of a div. This would automatically display your \n's in the correct way.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>
Improve this answer

Comments

1

Maybe .text instead of .html?

Improve this answer

Comments

0

I had the following problem where I was fetching data from a database and wanted to display a string containing \n. None of the solutions above worked for me and I finally came up with a solution: https://stackoverflow.com/a/61484190/7251208

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.