ตัวแบ่งบรรทัดใน HTML ด้วย '\ n'

มีวิธีที่จะทำให้ HTML จัดการกับการขึ้น\nบรรทัดใหม่ได้หรือไม่? หรือฉันต้องแทนที่พวกเขาด้วย<br/>?

https://jsfiddle.net/zawyatzt/

นี่คือการแสดงขึ้นบรรทัดใหม่และคืนค่าขนส่งใน html จากนั้นคุณไม่จำเป็นต้องทำอย่างชัดเจน คุณสามารถทำได้ใน css โดยการตั้งค่า pre-line คุณลักษณะ white-space

<span style="white-space: pre-line">@Model.CommentText</span>

คุณสามารถใช้ CSS คุณสมบัติสำหรับwhite-space \nนอกจากนี้คุณยังสามารถเก็บรักษาแท็บได้เช่น\tกัน

สำหรับการขึ้นบรรทัดใหม่\n:

white-space: pre-line;

สำหรับตัวแบ่งบรรทัด\nและแท็บ\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>

ตามคำถามของคุณสามารถทำได้หลายวิธี: - ตัวอย่างเช่นคุณสามารถใช้:

หากคุณต้องการแทรกบรรทัดใหม่ในพื้นที่ข้อความคุณสามารถลอง: -


Line Feed และ
Carriage return

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

คุณสามารถจัด<pre>---</pre>รูปแบบข้อความล่วงหน้าได้

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

หรือคุณสามารถใช้<p>----</p>ย่อหน้า

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

หมายเหตุ: ถ้าคุณต้องการใช้\nคุณต้องติดตั้งเซิร์ฟเวอร์เช่น Xampp หรือ Apache เพื่อรองรับภาษาฝั่งเซิร์ฟเวอร์

คุณสามารถใช้<pre>แท็ก

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

คุณสามารถใช้<pre>แท็ก:

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

การใช้white-space: pre-lineช่วยให้คุณสามารถป้อนข้อความโดยตรงใน HTML โดยมีตัวแบ่งบรรทัดโดยไม่ต้องใช้\n

ถ้าคุณใช้innerTextคุณสมบัติขององค์ประกอบผ่าน JavaScript บนองค์ประกอบที่ไม่ใช่ก่อนเช่น<div>ที่\nค่าจะถูกแทนที่ด้วย<br>ใน DOM ไปโดยปริยาย

• innerText: แทนที่\nด้วย<br>
• innerHTML, textContent: ต้องการการใช้สไตล์white-space

ขึ้นอยู่กับว่าคุณใช้ข้อความอย่างไร แต่ก็มีตัวเลือกมากมาย

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

เรียบง่ายและเป็นเส้นตรง:

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

<br/>คุณควรพิจารณาเปลี่ยนเบรกสายของคุณด้วย ใน HTML ตัวแบ่งบรรทัดจะขึ้นบรรทัดใหม่ในโค้ดของคุณเท่านั้น

หรือคุณสามารถใช้มาร์กอัป HTML อื่น ๆ เช่นวางบรรทัดในย่อหน้า:

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

หรือห่ออื่น ๆ เช่นเช่น<div>sample</div>มีคุณลักษณะ display: blockCSS:

<pre>นอกจากนี้คุณยังสามารถใช้ เนื้อหาของpreจะทำให้มันเป็นสไตล์ HTML ที่ถูกละเว้น กล่าวอีกนัยหนึ่งมันจะแสดง html บริสุทธิ์ด้วย\nbrakelines ปกติ