在Element.TextContent中键入换行符

Question

I am trying to generate a textual content in a web application. I want a text to appear into a header element <h1> but the text must contain newline breaks.

First attempt

var el = document.getElementById("myel");
var newline = "\r\n";
var nbsp = "\u00a0";
el.textContent = "My awesome" + newline + "web" + nbsp + "application";

This is not working. I mean in the developer tools, by inspecting the DOM, I can see the text being broken between "awesome" and "web" , but the browser does not render it that way: the text is all on the same line but at least the non breaing space (which is correctly rendered like &nbsp ) is there.

Trying <br/> .

If I try to use <br/> , I must use innerHTML :

var el = document.getElementById("myel");
var newline = "<br/>";
var nbsp = "&nbsp";
el.innerHTML = "My awesome" + newline + "web" + nbsp + "application";

So there is no way I can get my problem solved by using textContent ? I would really like avoiding innerHTML .

Answer 1

Use CSS white-space: pre; with "\\r\\n" :

 var el = document.getElementById("myel"); var newline = "\\r\\n"; var nbsp = "\ "; el.textContent = "My awesome" + newline + "web" + nbsp + "application"; 

 #myel { white-space: pre; } 

 <h1 id="myel"></h1>