Multiline template strings from ES6 into HTML not including line breaks

Question

I have a large template literal in a JS file (using ES6 standards) that looks similar to:

let stringLiteral = `this is a large
                     string and it also 
                     has many lines in it

                     and this is a larger line break`

and to put it in my HTML file, I'm just using:

document.getElementById('content').innerHTML = stringLiteral;

But, when I do this, the line breaks aren't being included in the HTML. What do I have to do to make that happen?

Answer 1

Whitespace in text nodes is collapsed by default. Use <br /> or <br> for newlines or add white-space: pre; to the css for that element.