html css return line ↵

Question

I have a JSON response from the server, in this data I have a "return line" in the text.

{text: "I am in the first line ↵ and I am in the second line"}

But when I display this in the html, there is no "return line" displayed.

"I am in the first line and I am in the second line"

Instead of:

I am in the first line
and I am in the second line

Any solutions using HTML or CSS (maybe JavaScript)?

Thank you !

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space — Bergi, Mar 05 '18 at 19:26
You need to put an explicit `
` in if you want the "return" to take effect in the rendered markup. — jonrsharpe, Mar 05 '18 at 19:27
You need to replace the return line character in your text for the HTML's equivalent (which is the `
` tag). — blurfus, Mar 05 '18 at 19:30
@Bergi it may be obvious to you what the link makes reference to but it might not be to others. Care to expand on your comment (perhaps even make it an answer, if suitable)? — blurfus, Mar 05 '18 at 19:32
There are a lot of resources out there that will give you answers. You will need to consider how you want this to be displayed. We do not have enough information to give you a proper answer, and there are many other resources that will lead you to the proper answer for you. Here's one: https://www.w3schools.com/html/html_paragraphs.asp — adprocas, Mar 05 '18 at 19:33

score 5 · Answer 1 · answered Mar 05 '18 at 19:40

5

adding this css class solve the problem !

white-space: pre-line;

answered Mar 05 '18 at 19:40

NoteStylet

315
1
3
21

1

correct answer, works like charm – Anis Mar 17 '21 at 07:17

score 2 · Answer 2 · answered Mar 05 '18 at 19:32

You can replace the new-line characters with HTML line-breaks as suggested by other users.

const parse = s => s.replace(/[␤␍␊↵⏎]+/g, '\n');
const nl2br = s => s.replace(/\n/g, '<br>');

var data = {
  "text" : "I am in the first line ↵ and I am in the second line"
};

document.getElementById('display').innerHTML = nl2br(parse(data.text));

<div id="display"></div>

html css return line ↵

2 Answers2