Salto de línea en HTML con '\ n'

Respuestas:

353

Esto es para mostrar una nueva línea y un carro de retorno en html, entonces no necesita hacerlo explícitamente. Puede hacerlo en css configurando el valor de línea previa del atributo de espacio en blanco.

<span style="white-space: pre-line">@Model.CommentText</span>
khakishoiab
fuente
13
También puede usar white-space: pre-wrapsi desea retener el espacio de pestañas también.
Vijay Shegokar
124

Puede usar la white-spacepropiedad CSS para \n. También puede conservar las pestañas como en \t.

Para salto de línea \n:

white-space: pre-line;

Para salto de línea \ny pestañas \t:

white-space: pre-wrap;

Darlesson
fuente
Está disponible durante mucho tiempo y es compatible con todos los principales navegadores .
Darlesson
23

Según su pregunta, se puede hacer de varias maneras: - Por ejemplo, puede usar:

Si desea insertar una nueva línea en el área de texto, puede intentar esto: -

&#10;Avance de línea y &#13;retorno de carro

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

También puede <pre>---</pre>preformatear el texto.

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

O puede usar el <p>----</p>párrafo

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

Nota: si desea usarlo \n, necesita instalar un servidor como Xampp o Apache para admitir el lenguaje del lado del servidor

Sampad
fuente
55
¿Podría por favor dar más detalles sobre su última nota? No entiendo por qué crees que se requiere soporte del lado del servidor para esto ...
Shadow
La última oración aquí es objetivamente falsa, como lo han demostrado varias otras respuestas. E incluso si no fuera compatible de forma nativa, podría cambiarlo fácilmente con JavaScript del lado del cliente.
John Montgomery
13

Podrías usar la <pre>etiqueta

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

Johan Brännmar
fuente
12

puedes usar la <pre>etiqueta:

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

Ehsan
fuente
5

El uso le white-space: pre-linepermite ingresar el texto directamente en el HTML con saltos de línea sin tener que usar\n

Si utiliza la innerTextpropiedad del elemento a través de JavaScript en un elemento no pre, por ejemplo <div>, a , los \nvalores se reemplazarán <br>en el DOM de forma predeterminada

  • innerText: reemplaza \ncon<br>
  • innerHTML, textContent: requiere el uso de estilowhite-space

Depende de cómo apliques el texto, pero hay varias opciones

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

Simple y lineal:

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

Debería considerar reemplazar los frenos de línea con <br/>. En HTML, un salto de línea solo representará una nueva línea en su código.

Alternativamente, puede usar algunas otras marcas HTML como colocar sus líneas en párrafos:

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

u otras envolturas como por ejemplo <div>sample</div>con el atributo css: display: block.

También puedes usar <pre>. El contenido de pretendrá su estilo html ignorado. En otras palabras, mostrará html puro con \nbrakelines normales

Luke
fuente