Html Rendered In The Page Looks Ok, But The Actual Result Is No

I am developing a page, I am returning data from the server (sharepoint), and displaying it in a paragraph element using $('#Fees').html(); The text should contain carriage return

Solution 1:

add the following CSS

#Fees {
    white-space: pre
}

This will make that <p> tag behave like a pre tag, without all the other changes a <pre> tag has (like font for instance)

Solution 2:

Multiple White Spaces and Line Breaks are read in HTML as a Single White Space. Use the <pre> tag if you want to preserve White Space, either that, or use   to create Non-breaking White Spaces in conjunction with <br /> to create Block-level line breaks. The CSS solution to make White Space act like the <pre> tag would also work: p{white-space:pre;}.

Solution 3:

I think you should translate your line feeds into <br> tags before putting your data into the paragraph. Regular line feeds inside html code don't get rendered.

For example, assuming you have your text inside a string before writing it in your <p>:

yourstring.replace(/(?:\r\n|\r|\n)/g, "<br>");

Then you move it into the <p> tag.