Quebra de linha em HTML com '\ n'

221

Existe uma maneira de fazer o HTML tratar adequadamente as \nquebras de linha? Ou eu tenho que substituí-los por <br/>?

https://jsfiddle.net/zawyatzt/

html

— stkvtflw
fonte

jsfiddle.net/zawyatzt/2

— shas

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;

Mostrar snippet de código

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>

Expandir snippet

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


Alimentação de linha e 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>

Expandir snippet

— Johan Brännmar
fonte

12

você pode usar a <pre>tag:

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

Expandir snippet

— 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