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.

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.

• javascript
• html

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jun 23, 2015 at 12:17 AndryAndry 16.9k3030 gold badges156156 silver badges265265 bronze badges 1

• The \r\n sign is only seen in the code view mode. It is a line break for a code not for an HTML. Afaik you cannot create line breaks by setting the textContent of an element. Only if the text get the end of line. – iamawebgeek Commented Jun 23, 2015 at 12:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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

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

#myel {
  white-space: pre;
}

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