Line break in HTML with '\n'
HtmlHtml Problem Overview
Is there a way to make HTML properly treat \n
line breaks? Or I have to replace them with <br/>
?
<div class="text">
abc
def
ghi
</div>
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
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>
Solution 3 - Html
As per your question, it can be done by various ways: - For example you can use:
> If you want to insert a new line in text area , you can try this:-
Line Feed and
Carriage return
<textarea>Hello Stackoverflow</textarea>
> You can also <pre>---</pre>
Preformatted text.
<pre>
This is Line1
This is Line2
This is Line3
</pre>
> Or,you can use <p>----</p>
Paragraph
<p>This is Line1</p>
<p>This is Line2</p>
<p>This is Line3</p>
Solution 4 - Html
You could use the <pre>
tag
<div class="text">
<pre>
abc
def
ghi
</pre>
abc
def
ghi
</div>
Solution 5 - Html
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 <br>
in the DOM by default
innerText
: replaces\n
with<br>
innerHTML
,textContent
: require the use of stylingwhite-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 '
Solution 6 - Html
you can use <pre>
tag :
<div class="text">
<pre>
abc
def
ghi
</pre>
</div>
Solution 7 - Html
Simple and linear:
<p> my phrase is this..<br>
the other line is this<br>
the end is this other phrase..
</p>
Solution 8 - Html
A simple and more natural solution that doesn't involve CSS styles or numeric character references like
would be to use the 

character entity reference:
The primary colors are:
- Red
- Green
- 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.
Solution 9 - Html
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