Line break in HTML with '\n'

Question

Is there a way to make HTML properly treat \n line breaks? Or do I have to replace them with  ?

<div class="text">
  abc
  def
  ghi
</div>

score 900 · Accepted Answer · edited Feb 14 '23 at 01:43

900

This is to show new line and return carriage in HTML. Then you don't need to do it explicitly. You can do it in CSS by setting the white-space attribute pre-line value.

<span style="white-space: pre-line">@Model.CommentText</span>

edited Feb 14 '23 at 01:43

Peter Mortensen

30,738
21
105
131

answered Sep 05 '16 at 07:13

khakishoiab

9,673
2
16
22

70

You can also use `white-space: pre-wrap` if want to retain tabs space also. – Vijay Shegokar Jun 11 '19 at 08:57
1
Great answer! the problem with answers with `
```
` is the block is rendered like a code block
```
– Abdul Rahman K Jun 17 '23 at 11:57

Darlesson · Answer 2 · 2017-11-13T17:30:48.440

349

You can use CSS white-space property for \n. You can also preserve the tabs as in \t.

For line break \n:

white-space: pre-line;

For line break \n and tabs \t:

white-space: pre-wrap;

document.getElementById('just-line-break').innerHTML = 'Testing 1\nTesting 2\n\tNo tab';

document.getElementById('line-break-and-tab').innerHTML = 'Testing 1\nTesting 2\n\tWith tab';

#just-line-break {
  white-space: pre-line;
}

#line-break-and-tab {
  white-space: pre-wrap;
}

<div id="just-line-break"></div>

<br/>

<div id="line-break-and-tab"></div>

edited Nov 13 '17 at 17:30

answered Jul 18 '17 at 23:14

Darlesson

5,742
2
21
26

7

This is available for a long time and it's [supported by all major browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Browser_compatibility). – Darlesson Jun 21 '18 at 21:45

score 94 · Answer 3 · edited Feb 14 '23 at 01:44

94

It can be done various ways.

For example, if you want to insert a new line in a text area, you can use these:


 line feed and  carriage return, used like this:

<textarea>Hello &#10;&#13;Stackoverflow</textarea>

You can also use <pre>---</pre> preformatted text like this:

<pre>
  This is line 1
  This is line 2
  This is line 3
</pre>

Or you can use a ---- paragraph tag like this:

<p>This is line 1</p>
<p>This is line 2</p>
<p>This is line 3</p>

edited Feb 14 '23 at 01:44

Peter Mortensen

30,738
21
105
131

answered Sep 05 '16 at 07:43

Sampad

1,645
11
14

7

Could you please elaborate on your last note? I don't understand why you think server side support is required for this... – Shadow Jul 18 '17 at 23:27
3

The last sentence here is objectively false, as several other answers have demonstrated. And even if it weren't supported natively, you could easily change it with client-side JavaScript. – John Montgomery May 12 '20 at 22:48

Johan Brännmar · Answer 4 · 2018-04-24T13:24:36.463

37

You could use the <pre> tag

<div class="text">
<pre>
  abc
  def
  ghi
</pre>
  abc
  def
  ghi
</div>

edited Apr 24 '18 at 13:24

answered Sep 05 '16 at 07:11

Johan Brännmar

886
7
21

score 28 · Answer 5 · answered Dec 13 '18 at 09:29

28

Using white-space: pre-line allows you to input the text directly in the HTML with line breaks without having to use \n

If you use the innerText property of the element via JavaScript on a non-pre element e.g. a <div>, the \n values will be replaced with   in the DOM by default

innerText: replaces \n with  
innerHTML, textContent: require the use of styling white-space

It depends on how your applying the text, but there are a number of options

const node = document.createElement('div');
node.innerText = '\n Test \n One '

answered Dec 13 '18 at 09:29

Drenai

11,315
9
48
82

1

Interesting. I ran into this on accident. Is there any documentation describing this? – Trade-Ideas Philip Aug 14 '21 at 23:46
1

There's a number of different concepts here, and the `br` behavior is browser dependent - so it's unlikely to be described as a single piece of documentation. I've rarely used `innerText`, but use `white-space` styling regularly – Drenai Aug 15 '21 at 16:36

score 21 · Answer 6 · edited Feb 14 '23 at 01:42

21

You can use <pre> tag:

<div class="text">
<pre>
abc
def
ghi
</pre>
</div>

edited Feb 14 '23 at 01:42

Peter Mortensen

30,738
21
105
131

answered Sep 05 '16 at 07:12

Ehsan

12,655
3
25
44

score 14 · Answer 7 · edited Feb 14 '23 at 01:48

14

You can use this CSS property:

white-space: pre-line

edited Feb 14 '23 at 01:48

Peter Mortensen

30,738
21
105
131

answered Nov 30 '22 at 15:43

Ashadi Sedana Pratama

639
8
11

score 11 · Answer 8 · answered Aug 29 '18 at 17:23

11

Simple and linear:

 <p> my phrase is this..<br>
 the other line is this<br>
 the end is this other phrase..
 </p>

answered Aug 29 '18 at 17:23

Alessandro Ornano

34,887
11
106
133

The
HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. This is easier. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br – Diego Lope Loyola Dec 04 '21 at 06:08
@DiegoLopeLoyola I agree with you but sometimes some compilers or programming languages unfortunately accepts only this HTML tag for this purpose. – Alessandro Ornano Dec 04 '21 at 12:00

score 10 · Answer 9 · answered May 20 '22 at 10:41

10

You can use any of the following CSS,

white-space: pre-line;

or

white-space: pre-wrap;

or

white-space: break-spaces;

For more info read: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

answered May 20 '22 at 10:41

Ajay Sivan

2,807
2
32
57

score 3 · Answer 10 · edited Feb 14 '23 at 01:45

3

A simple and more natural solution that doesn't involve CSS styles or numeric character references like 
 would be to use the &NewLine; character entity reference:

The primary colors are:&NewLine;- Red&NewLine;- Green&NewLine;- Blue

Note: Since this is defined simply as the LF (line feed, or the U+000A Unicode code point) character, it can be debatable whether it suits scenarios where the entire CR + LF (carriage return + line feed) sequence is required. But then, it worked in my Chrome, Edge and WebView2 tests done in Windows 10, so it should be safe to use.

edited Feb 14 '23 at 01:45

Peter Mortensen

30,738
21
105
131

answered May 14 '22 at 15:59

Yin Cognyto

986
1
10
22

This worked but required CSS `white-space: pre-line;`. Both work well together since some code formatters remove white space. – HelloWorldPeace Oct 11 '22 at 14:59
What is the intent of `&NewLine;`? Literal? Rendered somehow? Some kind of encoding of non-printable ASCII character? Can you elaborate? – Peter Mortensen Feb 14 '23 at 01:46
1

@PeterMortensen It's just the character entity reference of a line feed, similar to how ` ` from the accepted answer is its numerical (decimal) entity reference in XML / HTML. They are standard textual or numerical representations of a character defined in the [HTML specifications](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references) and can be used for almost all Unicode characters, irrespective if they are printable or not. It's not specially rendered, it's just one of the three ways (literal, numerical, textual) to represent such an "entity" in HTML. – Yin Cognyto Feb 14 '23 at 16:00

score 1 · Answer 11 · answered May 11 '23 at 13:05

1

\n or \t or \r are interpreted inside of <pre>---</pre>

It worked for me.

answered May 11 '23 at 13:05

Tireuuuuu

43
6

Line break in HTML with '\n'

11 Answers11

Linked

Related