Quebra de linha em html com ` `

Pode usar a propriedade CSS white-space para \n. Você também pode preservar as abas como em \t.

Para quebra de linha\n:

white-space: pre-line;

Para quebra de linha \n e separadores \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>

Se quiser inserir uma nova linha na área de texto, pode tentar isto: -


 Line Feed e 
 Carriage return

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

Você também pode <pre>---</pre> texto pré-formatado.

<pre>
     This is Line1
     This is Line2
     This is Line3
</pre>

Ou, pode utilizar <p>----</p> O parágrafo

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

Nota: Se quiser usar \n tem de instalar um servidor como o Xampp ou o Apache para Língua do lado do servidor de suporte

Pode usar <pre> marca:

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

Podias usar a marca <pre>

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

Devias pensar em substituir os travões de linha por <br/>. Em HTML uma quebra de linha só irá significar uma nova linha no seu código.

Em alternativa, pode usar outras marcações HTML, como colocar as suas linhas nos parágrafos:

<p>Sample line</p>
<p>Another line</p>

Ou outras embalagens como por exemplo <div>sample</div> com o atributo css: display: block.

Também pode utilizar <pre>. O conteúdo de pre terá o estilo html ignorado. Por outras palavras, irá mostrar html puro com o normal \n brakelines

Simples e lineares:

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