0

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.

Jacky
  • 393
  • 1
  • 3
  • 13
  • 2
    `is it a known thing with paragraph tags` - no, it's how HTML works ... line breaks (\r \n etc) are just "white space" in HTML documents. you need to use `
    ` tags or put your text inside a `
    ` tag, or change the CSS styling of the `
    ` tag to be "like" a `
    ` tag - and try posting "code" and "resulting text" rather than images of code and resulting text
     – Jaromanda X Dec 08 '16 at 23:07
  • Thanks @JaromandaX, but why does it show as normal html in the source, but not reflecting on the page? – Jacky Dec 08 '16 at 23:08
  • because it is normal html ... where line breaks don't matter (like I **just said** ) – Jaromanda X Dec 08 '16 at 23:09
  • in case you want to preserve plain text editor format (blank spaces and newlines) you need to use a 
       tag.
     – Bekim Bacaj Dec 08 '16 at 23:09
  • @JaromandaX, I changed it to pre tag, the text is different, the style is different,spaces between lines are different, how can I just make the paragraph tag acts like it ? – Jacky Dec 08 '16 at 23:12
  • see my answer that I posted before you asked (I saw it coming!!!) – Jaromanda X Dec 08 '16 at 23:13
  • It is intentional in HTML that all spaces/tabs/newlines are condensed to a single space, to give you the freedom to format your _source_ in whatever way you find convenient and readable without affecting the appearance of the resulting page rendered from that source. I recommend _not_ setting white-space to `pre` and instead putting in `
    ` tags when you want a line to break at a specific place. In your example, it looks like a _list_ so I would _make it_ a list: `

    Main fees:

    1. Fee1
    2. Fee2
    `     – Stephen P Dec 09 '16 at 01:18
  • Hi Stephen, I can't control the source as it's data fetched from another system.. so – Jacky Dec 09 '16 at 07:01

3 Answers3

2

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)

Jaromanda X
  • 53,868
  • 5
  • 73
  • 87
  • I can accept an answer in 4 minutes :D – Jacky Dec 08 '16 at 23:14
  • You're brilliant sir – Jacky Dec 08 '16 at 23:15
  • Cat behaviorists are always good coders – Jacky Dec 08 '16 at 23:15
  • lol - I forgot I had that there :p – Jaromanda X Dec 08 '16 at 23:17
  • so the spaces that appear in html but not on the page, are called white spaces? I thought white space is the space I have between words, right? – Jacky Dec 08 '16 at 23:18
  • No, white space is indeed the space you have between words. The css property "white-space" determines which way the space between words is treated by the browser: pre preserves it (pre-formatted). The default behavior is to strip multiple whitespaces and remove newlines – AquilaIrreale Dec 08 '16 at 23:25
  • Why do people vote down my questions, like my promises question yesterday? What do they expect? – Jacky Dec 08 '16 at 23:31
  • I guess because there's a similar question on SO. Though you'd have to know what you're looking for to find it. – Jaromanda X Dec 08 '16 at 23:38
  • But I don't know what am facing, if I knew the answer, I wouldn't take the time to make a question – Jacky Dec 08 '16 at 23:39
  • I understand the frustration - some people are quick to vote :p – Jaromanda X Dec 08 '16 at 23:40
  • many questions on SO are replicated, but people are using the downvote in a wrong way – Jacky Dec 08 '16 at 23:40
  • @Jacky The downvote button says "This question does not show any research effort; it is unclear or not useful" (although I would use the oxford comma: _does not show effort, it is unclear, or not useful_) — these are all a matter of opinion. IMHO a "good" downvoter also comments on what they think needs fixing to improve the question, but I don't think they're using it "in a wrong way". As Jaromanda says, they probably thought you should have been able to find the answer in a previous SO question; but sometimes it's hard to come up with a good search to find those. – Stephen P Dec 09 '16 at 01:11
  • @JaromandaX Hi, can you answer me on this question http://stackoverflow.com/questions/41081380/white-space-pre-adds-extra-padding-any-other-solution – Jacky Dec 10 '16 at 23:28
1

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 &nbsp; 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;}.

StackSlave
  • 10,613
  • 2
  • 18
  • 35
0

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.

AquilaIrreale
  • 432
  • 6
  • 13