`\n` not creating new lines inside
tag

Asked May 04 '20 at 13:45

Active May 04 '20 at 14:07

Viewed 250 times

I have a <p> with some large content in it. This is paragraph is retrieved from firebase realtime database. As we cannot store use \n directly in firebase database (because when retrieved it will simply print as \n in the paragraph).

So I store it in firebase database as _n_ and when retrieved in my JavaScript code I replace it with \n. Just like below:

let formattedContent = String(content).replace(/_n_/g, "\n");

Content is just data received.

The \n is not working here. But when I change the tag from <p> to <pre> it worked. All the \n present were doing the job of adding new lines.

But some of my lines are pretty long and content will overflow the container if I use the pre tag. Even though I have added word wrap. word-wrap: break-word;

So how can I get \n working in <p> tag?

EDIT: I have tried replacing with <br/> but it justs prints itself inside the P tag. Also for some reason this solution kept overflowing my container.

edited May 04 '20 at 14:07

asked May 04 '20 at 13:45

Dharmaraj

47,845
8
52
84

4

Replace `\n`s with `
`s, `\n` is not a part of HTML (excluding some special elements like `pre`), it's is renedered as it is. – Teemu May 04 '20 at 13:48
@Teemu please check my EDIT part in question – Dharmaraj May 04 '20 at 13:49
1

Then we need to know how you're adding the string into the DOM. – Teemu May 04 '20 at 13:49
how are you passing `formattedContent` to the content of the `
`?
– Pedro Lima May 04 '20 at 13:49
@PedroLima `logContent.textContent = formattedContent;` – Dharmaraj May 04 '20 at 13:51
1

Use `.innerHTML` instead. – Federico Moretti May 04 '20 at 13:51
@Teemu check above comment. By the way `logContent` is name of P – Dharmaraj May 04 '20 at 13:51
You need to set `innerHTML`, or call [`.insertAdjacentHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML). – Teemu May 04 '20 at 13:51
@PedroLima it did work – Dharmaraj May 04 '20 at 13:53
@Teemu innerHTML did it for me. Thanks. Didn't found that on SO anywhere – Dharmaraj May 04 '20 at 13:53
@appleapple w3school and also a reference video. – Dharmaraj May 04 '20 at 13:57
Does this answer your question? [Line break in HTML with '\n'](https://stackoverflow.com/questions/39325414/line-break-in-html-with-n) – Heretic Monkey May 04 '20 at 13:59
sorry I link to my local language :P here is the English link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent – apple apple May 04 '20 at 14:03
If you use `element.innerText`, `\n` will work. – D. Pardal May 04 '20 at 14:03
@D.Pardal I'll try. I have user innerHTML for now – Dharmaraj May 04 '20 at 14:04
@appleapple no prob. I had changed that language :-) – Dharmaraj May 04 '20 at 14:04

`\n` not creating new lines inside tag

0 Answers0

`\n` not creating new lines inside
tag