'Line break in HTML with '\n'

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>
htmllinuxbashtouchzshmkdir


Solution 1:[1]

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 2:[2]

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:-

&#10; Line Feed and &#13;Carriage return

<textarea>Hello &#10;&#13;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 3:[3]

You could use the <pre> tag

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

Solution 4:[4]

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 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 '

Solution 5:[5]

you can use <pre> tag :

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

Solution 6:[6]

Simple and linear:

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

Solution 7:[7]

A simple and more natural solution that doesn't involve CSS styles or numeric character references like &#13;&#10; 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.

Solution 8:[8]

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

Solution 9:[9]

With zsh you can do:

mkdir -p -- $@:h && : >>| $@

mkdir is given the "head" of each argument to make the directories (man zshexpn says the :h expansion modifier works like the dirname tool). Then, assuming you have not unset the MUTLIOS option, the output of : (a command that produces no output) is appended to the files.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Pabasara Mahindapala
Solution 3
Solution 4 Drenai
Solution 5
Solution 6 Alessandro Ornano
Solution 7 Yin Cognyto
Solution 8 Ajay Sivan
Solution 9

Related Questions