String template - new line doesn't show

Question

I'm trying to use a template string to update infoDiv's text and for some reason all this text is in one line. What am I doing wrong? None of these solutions work - they're just rendered.

infoDiv.textContent = `Hi!
It's a ${counter} question quiz.
It takes about ${time_minutes} minutes to solve it.
Are you ready?`

EDIT:

I found a CSS solution here (white-space: pre-line;).

let counter = 8;
let time_minutes = 3;

infoDiv.textContent = `Hi!
It's a ${counter} question quiz.
It takes about ${time_minutes} minutes to solve it.
Are you ready?`

<div id="infoDiv" style="white-space: pre-line"></div>

Possible duplicate of [Insert new line in text only div](http://stackoverflow.com/questions/37811366/insert-new-line-in-text-only-div) — ibrahim mahrir, May 02 '17 at 03:31
`'\n'` as text content will be rendered as a space. You want a line break in HTML, you need to write `
`. — Leo, May 02 '17 at 03:39
Thanks all, I found a solution [here](http://stackoverflow.com/questions/9980416/how-can-i-insert-new-line-carriage-returns-into-an-element-textcontent): adding `white-space: pre-line;` to div's css — Anna, May 02 '17 at 03:53
This has nothing to do with JavaScript. HTML renders line breaks as normal spaces. — Felix Kling, May 02 '17 at 04:24

score 5 · Accepted Answer · answered May 02 '17 at 04:06

Style the div with white-space CSS property.

const counter = 22;
const time_minutes = 60;

infoDiv.textContent = `Hi!
It's a ${counter} question quiz.
It takes about ${time_minutes} minutes to solve it.
Are you ready?`

<div id="infoDiv" style="white-space: pre-wrap"></div>

String template - new line doesn't show

1 Answers1

Linked

Related