1

EDIT solved

I wonder why the following code is not working-no newline is being 'produced' Anyone has an idea ? Thanks 

$('#results').append("Try again! \n I believe in you");
learningcoding
  • 187
  • 2
  • 14
  • Possible duplicate: http://stackoverflow.com/questions/1155678/javascript-string-newline-character?rq=1 – Tiare Hess May 20 '16 at 18:51
  • Possible duplicate of [Rendering newlines in escaped html](http://stackoverflow.com/questions/12694110/rendering-newlines-in-escaped-html) – Heretic Monkey May 20 '16 at 18:52
  • If it was solved then you should select an answer not just edit the original question – njfife May 20 '16 at 20:50

3 Answers3

4

I am assuming that you are doing an ajax call or something and the results contain the '\n' and you can't change it?

That's fine, in HTML things like \n and whitespace are ignored unless you explicitly state that you want to use the whitespace.

There are two main ways to do this.

First is with the <pre> tag

$(function() {
  $('#results').append("Try again! \n I believe in you");
})
<html>
  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>

  <body>
    <pre id="results"></pre>
  </body>
</html>

Second (better way) is with the css using white-space

In the next example I use white-space:pre-line This will only preserve your \n or new lines

$(function() {
  $('#results').append("Try again! \n I believe in you");
})
<html>
  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  </head>

  <body>
    <div style = "white-space: pre-line" id="results"></div>
  </body>
</html>

Notice that the second one is using a standard <div>, triggers a new line and doesn't preserve the extra whitespace after the \n? That might be more of what you are looking for. You can also set it to white-space:pre and the div should behave just like a <pre></pre> in terms of white space and new lines.

white-space has a lot of options:

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

That should provide you with what you need.

You may need to use Javascript to sanitize the text if you are looking for a very specific format.

There are other ways to get breaks in text but if you are specifically using \n then these are the only two ways that I know of to do it.

Hope this helps!

njfife
  • 3,555
  • 1
  • 20
  • 31
3

White spaces do not break in html, they collapse into a single displayed whitespace displayed as . If you want to render a break in html you have to use a break tag <br>

$('#results').append("Try again! <br> I believe in you");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>
Musa
  • 96,336
  • 17
  • 118
  • 137
  • You should select an answer btw, if this was the solution you needed then this would be the one you should select. If it was another one then you should upvote it and mark it as correct. – njfife May 20 '16 at 20:19
2

It's in HTML, you need to use linebreaks, <br>, instead of newlines.

TankorSmash
  • 12,186
  • 6
  • 68
  • 106
  • `\n` will work just fine if you use a `
    ` or if you use `white-space:pre` in the CSS

You can also use 'white-space:pre-line` to ignore whitespace that isn't some type of newline, like `\n`    
        – njfife
                May 20 '16 at 20:17
    
    

    
                    
                
    •