Quebra de linha em HTML com '\ n'

Respostas:

353

Isso é para mostrar a nova linha e retornar o transporte em html, então você não precisa fazer isso explicitamente. Você pode fazer isso em css, definindo o valor de pré-linha do atributo de espaço em branco.

<span style="white-space: pre-line">@Model.CommentText</span>
khakishoiab
fonte
13
Você também pode usar white-space: pre-wrapse desejar reter espaço nas guias também.
Vijay Shegokar 11/06/19
124

Você pode usar a white-spacepropriedade CSS para \n. Você também pode preservar as guias como em \t.

Para quebra de linha \n:

white-space: pre-line;

Para quebra de linha \ne guias \t:

white-space: pre-wrap;

Darlesson
fonte
Está disponível há muito tempo e é suportado por todos os principais navegadores .
Darlesson
23

Conforme sua pergunta, isso pode ser feito de várias maneiras: - Por exemplo, você pode usar:

Se você deseja inserir uma nova linha na área de texto, tente o seguinte: -

&#10;Alimentação de linha e &#13;retorno de carro

<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 você pode usar o <p>----</p>parágrafo

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

Nota: se você quiser usar, \nprecisará instalar um servidor como Xampp ou Apache para suportar o idioma do servidor

Sampad
fonte
5
Você poderia elaborar sua última nota? Eu não entendo por que você acha que o apoio do lado do servidor é necessária para isso ...
Sombra
A última frase aqui é objetivamente falsa, como várias outras respostas demonstraram. E mesmo que não tenha suporte nativo, você pode alterá-lo facilmente com o JavaScript do cliente.
John Montgomery
13

Você poderia usar a <pre>tag

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

Johan Brännmar
fonte
12

você pode usar a <pre>tag:

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

Ehsan
fonte
5

Usar white-space: pre-linepermite inserir o texto diretamente no HTML com quebras de linha sem precisar usar\n

Se você usar a innerTextpropriedade do elemento via JavaScript em um elemento não-pre por exemplo, um <div>, os \nvalores serão substituídos <br>no DOM por padrão

  • innerText: substitui \npor<br>
  • innerHTML, textContent: exige o uso de estilowhite-space

Depende de como você está aplicando o texto, mas há várias opções

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

Simples e linear:

 <p> my phrase is this..<br>
 the other line is this<br>
 the end is this other phrase..
 </p>
Alessandro Ornano
fonte
2

Você deve substituir seus freios de linha por <br/>. Em HTML, uma quebra de linha representará apenas uma nova linha no seu código.

Como alternativa, você pode usar outras marcações HTML, como colocar suas linhas em 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.

Você também pode usar <pre>. O conteúdo de preterá seu estilo html ignorado. Em outras palavras, ele exibirá html puro com \nbrakelines normais

Lucas
fonte