Search code examples
htmlcarriage-return

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, it shows ok when I view it inside the rendered html itself like the following: 

    <p id="Fees">Fees should be like the following: 

     Main fees: 
     1- Fee1
     2- Fee2</p>

As you can see, inside my paragraph, the carriage return is visible, however, on my page, it's not, as you can see below: 

Fees should be lik the following: Main fees: 1- Fee1 2- Fee2

What should I do? Is it something related to code, or is it a known thing with paragraph tags? I tried it with div tag, and same result. Any idea would be great.

Solution

  • 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)