Html not rendering javascript breaklines as intended

Question

I have a json file which contains some texts, and some of these texts could have some breaklines

"surchargeNoteText":"Please note \r \n that pre-payments will take up to 2 business \r \n days to be allocated to your reservation",

I tried to use \r and/or \n and the result was this

So, the funny thing is that when inspecting the html, the output is right, with 2 break lines.

So, any tips here ?

Possibly duplicate of this. Please refer below given link NewLine escape character not working — Bharat Choudhary
– Bharat Choudhary, Commented Apr 10, 2019 at 7:53

Donny · Accepted Answer · 2019-04-10 07:52:38Z

2

Use the <pre> tag to keep the text formatted as you wish

<pre>
I am inside
   a pre
          Tag!
<pre>

answered Apr 10, 2019 at 7:52

Donny

4873 silver badges9 bronze badges

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

Comments

Hassan Siddiqui · Accepted Answer · 2019-04-10 07:49:48Z

1

Add below CSS will resolve your issue. Thanks

p.jss98 {
   white-space: pre-wrap;
}

answered Apr 10, 2019 at 7:49

Hassan Siddiqui

2,8511 gold badge15 silver badges23 bronze badges

Comments

lwolf · Accepted Answer · 2019-04-10 07:50:49Z

0

In Html you need to add   to break lines.

"surchargeNoteText":"Please note that pre-payments will take up to 2 business days to be allocated to your reservation",

answered Apr 10, 2019 at 7:50

lwolf

4844 silver badges12 bronze badges

4 Comments

vbotio Over a year ago

its not html, this text is coming from a json file

lwolf Over a year ago

No problem. Then use let surchargeNoteText = surchargeNoteText.replace('\r \n', ' ');

vbotio Over a year ago

its actually rendering as a string, not interpretating as a html tag

KevinLH Over a year ago

I guess this is because the value is injected in the HTML document using innerText instead of innerHTML (before using the latter, make sure to read "Security considerations").

Sami Ahmed Siddiqui · Accepted Answer · 2019-04-10 07:51:37Z

0

Use   instead of \r and   instead of \n. In HTML, \r and \n doesn't works.

answered Apr 10, 2019 at 7:51

Sami Ahmed Siddiqui

2,3861 gold badge18 silver badges30 bronze badges

2 Comments

vbotio Over a year ago

its not html. its a dynamic text which comes from a json file

Sami Ahmed Siddiqui Over a year ago

@vbotio HTML doesn't render these tags you are getting from JSON. You can replace them in JS before appending it in HTML.

Collectives™ on Stack Overflow

Html not rendering javascript breaklines as intended

4 Answers 4

Comments

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related