Istirahat baris dalam HTML dengan '\ n'

Jawaban:

353

Ini untuk menunjukkan baris baru dan mengembalikan carriage dalam html, maka Anda tidak perlu melakukannya secara eksplisit. Anda dapat melakukannya di css dengan mengatur nilai pre-line atribut white-space.

<span style="white-space: pre-line">@Model.CommentText</span>
khakishoiab
sumber
13
Anda juga dapat menggunakan white-space: pre-wrapjika ingin mempertahankan ruang tab juga.
Vijay Shegokar
124

Anda dapat menggunakan white-spaceproperti CSS untuk \n. Anda juga dapat mempertahankan tab seperti pada \t.

Untuk jeda baris \n:

white-space: pre-line;

Untuk jeda baris \ndan tab \t:

white-space: pre-wrap;

Darlesson
sumber
Ini tersedia untuk waktu yang lama dan didukung oleh semua browser utama .
Darlesson
23

Sesuai pertanyaan Anda, itu dapat dilakukan dengan berbagai cara: - Misalnya Anda dapat menggunakan:

Jika Anda ingin menyisipkan baris baru di area teks, Anda dapat mencoba ini: -

&#10;Umpan Line dan &#13;Pengangkutan kembali

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

Anda juga dapat <pre>---</pre>teks yang telah diformat sebelumnya.

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

Atau, Anda bisa menggunakan <p>----</p>Paragraph

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

Catatan: jika Anda ingin menggunakan, \nAnda harus menginstal server seperti Xampp atau Apache untuk mendukung bahasa sisi server

Sampad
sumber
5
Bisakah Anda jelaskan catatan terakhir Anda? Saya tidak mengerti mengapa Anda berpikir dukungan sisi server diperlukan untuk ini ...
Shadow
Kalimat terakhir di sini secara objektif salah, karena beberapa jawaban lain telah menunjukkan. Dan bahkan jika itu tidak didukung secara asli, Anda dapat dengan mudah mengubahnya dengan JavaScript sisi klien.
John Montgomery
13

Anda bisa menggunakan <pre>tag

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

Johan Brännmar
sumber
12

Anda dapat menggunakan <pre>tag:

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

Ehsan
sumber
5

Menggunakan white-space: pre-linememungkinkan Anda untuk memasukkan teks secara langsung dalam HTML dengan jeda baris tanpa harus menggunakan\n

Jika Anda menggunakan innerTextproperti elemen melalui JavaScript pada elemen non-pra mis a <div>, \nnilai - nilai akan diganti dengan <br>di DOM secara default

  • innerText: ganti \ndengan<br>
  • innerHTML, textContent: membutuhkan penggunaan gayawhite-space

Itu tergantung pada bagaimana Anda menerapkan teks, tetapi ada sejumlah opsi

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

Sederhana dan linier:

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

Anda harus mempertimbangkan untuk mengganti rem baris dengan <br/>. Dalam HTML, satu baris hanya akan berarti baris baru dalam kode Anda.

Atau Anda dapat menggunakan beberapa markup HTML lainnya seperti menempatkan baris Anda dalam paragraf:

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

atau pembungkus lainnya seperti misalnya <div>sample</div>dengan atribut css: display: block.

Anda juga bisa menggunakan <pre>. Konten preakan memiliki gaya html diabaikan. Dengan kata lain itu akan menampilkan html murni dengan \nbrakeline normal

Luke
sumber