Preserve line breaks when adding template literal to html with JavaScript

Question

How would I preserve the end-of-line characters in the str template literal below when adding to html?

let str = `

          Woke up this morning,
           
           ate a baguette,
           
           smiled at a person and they smiled back.`

document.getElementById("example").innerHTML = `<div>Dreamfit:</div><div>${str}<div>`

<div id="example"></div>

Do you want to preserve just the line breaks, or all whitespace including indentation? — Stephen P, Sep 30 '20 at 21:08
I agree with Joan Albert's answer, but also see the summary table at the end of the [Values](https://developer.mozilla.org/docs/Web/CSS/white-space#Values) section for the [white-space](https://developer.mozilla.org/docs/Web/CSS/white-space) property at MDN. `pre`, `pre-wrap`, `pre-line`, and `break-spaces` will all preserve line breaks, so which you use depends on _what else_ you want to preserve. — Stephen P, Sep 30 '20 at 21:17

score 2 · Accepted Answer · answered Sep 30 '20 at 20:47

2

You need to style your div with white-space: pre-wrap:

So your code should look like:

let str = `

          Woke up this morning, 
ate a baguette,
           
           smiled at a person and they smiled back.`

document.getElementById("example").innerHTML = `<div>Dreamfit:</div><div style="white-space: pre-wrap;">${str}<div>`

<div id="example"></div>

answered Sep 30 '20 at 20:47

Joan Albert

644
10
23

2

I vote yes, this is the right way to do it ... but also, I always advocate for using _classes_ rather than inline styles, so I'd recommend `...
${str}
` or whatever class makes sense to describe _what_ the div contains (classes should be about _semantics_, not styles) – Stephen P Sep 30 '20 at 21:04
2

@StephenP totally agree with you, I just didn't want to add more complexity to my answer and focus on resolving the question. – Joan Albert Sep 30 '20 at 21:07

score 1 · Answer 2 · answered Sep 30 '20 at 20:42

1

You can do this with the <pre> tag:

let str = `<pre>

          Woke up this morning,
           
           ate a baguette,
           
           smiled at a person and they smiled back.</pre>`

document.getElementById("example").innerHTML = `<div>Dreamfit:</div><div>${str}<div>`

<div id="example"></div>

answered Sep 30 '20 at 20:42

Ozone

1,337
9
18

1

That works thanks & +1, but I'd very much like to not add anything else to `str` – Lee Sep 30 '20 at 20:44
1

You could put the pre around the $str as well, that way you don't have to modify the var – Ozone Sep 30 '20 at 20:47

score 1 · Answer 3 · answered Sep 30 '20 at 20:44

You can use .replace() also as:

let str = `

          Woke up this morning,
           
           ate a baguette,
           
           smiled at a person and they smiled back.`

let html = `<div>Dreamfit:</div><div>${str.replace(/\n/g, '<br>')}<div>`

document.getElementById("example").innerHTML = html

<div id="example"></div>

See the essential part separately here: str.replace(/\n/g, '<br>').

Preserve line breaks when adding template literal to html with JavaScript

3 Answers3