Ngắt dòng trong HTML với '\ n'

221

Có cách nào để làm cho HTML xử lý \nngắt dòng đúng cách không? Hoặc tôi phải thay thế chúng bằng <br/>?

html

— stkvtflw
nguồn

jsfiddle.net/zawyatzt/2

— Shas

353

Điều này là để hiển thị dòng mới và trả lại vận chuyển trong html, sau đó bạn không cần phải làm điều đó một cách rõ ràng. Bạn có thể làm điều đó trong css bằng cách đặt giá trị tiền dòng thuộc tính khoảng trắng.

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

— khakishoiab
nguồn

13

Bạn cũng có thể sử dụng white-space: pre-wrapnếu muốn giữ lại không gian tab.

— Vijay Shegokar

124

Bạn có thể sử dụng thuộc white-spacetính CSS cho \n. Bạn cũng có thể bảo quản các tab như trong \t.

Đối với ngắt dòng \n:

white-space: pre-line;

Đối với ngắt dòng \nvà tab \t:

white-space: pre-wrap;

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— Darlesson
nguồn

Điều này có sẵn trong một thời gian dài và nó được hỗ trợ bởi tất cả các trình duyệt chính .

— Darlesson

23

Theo câu hỏi của bạn, nó có thể được thực hiện bằng nhiều cách khác nhau: - Ví dụ: bạn có thể sử dụng:

Nếu bạn muốn chèn một dòng mới trong vùng văn bản, bạn có thể thử điều này: -


Line Feed và Vận chuyển trở lại

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

Bạn cũng có thể <pre>---</pre>định dạng trước văn bản.

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

Hoặc, bạn có thể sử dụng <p>----</p>Đoạn văn

<p>This is Line1</p>

<p>This is Line2</p>

<p>This is Line3</p>

Lưu ý: nếu bạn muốn sử dụng, \nbạn cần cài đặt một máy chủ như Xampp hoặc Apache để hỗ trợ ngôn ngữ phía máy chủ

— Sampad
nguồn

5

Bạn có thể vui lòng giải thích về ghi chú cuối cùng của bạn? Tôi không hiểu tại sao bạn nghĩ cần có sự hỗ trợ của máy chủ cho việc này ...

— Shadow

Câu cuối cùng ở đây là sai khách quan, như một số câu trả lời khác đã chứng minh. Và ngay cả khi nó không được hỗ trợ nguyên bản, bạn có thể dễ dàng thay đổi nó bằng JavaScript phía máy khách.

— John Montgomery

13

Bạn có thể sử dụng <pre>thẻ

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

Mở rộng đoạn trích

— Johan Brännmar
nguồn

12

bạn có thể sử dụng <pre>thẻ:

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

Mở rộng đoạn trích

— Ehsan
nguồn

5

Việc sử dụng white-space: pre-linecho phép bạn nhập văn bản trực tiếp vào HTML với các ngắt dòng mà không phải sử dụng\n

Nếu bạn sử dụng thuộc innerTexttính của phần tử thông qua JavaScript trên phần tử không có trước, ví dụ a <div>, các \ngiá trị sẽ được thay thế bằng <br>DOM theo mặc định

innerText: thay thế \nbằng<br>
innerHTML, textContent: yêu cầu sử dụng kiểu dángwhite-space

Nó phụ thuộc vào cách bạn áp dụng văn bản, nhưng có một số tùy chọn

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

— Drenai
nguồn

4

Đơn giản và tuyến tính:

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

— Alessandro Ornano
nguồn

2

Bạn nên xem xét thay thế phanh dòng của bạn với <br/>. Trong HTML, ngắt dòng sẽ chỉ thay thế cho dòng mới trong mã của bạn.

Ngoài ra, bạn có thể sử dụng một số đánh dấu HTML khác như đặt các dòng của bạn trong đoạn văn:

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

hoặc các hàm bao khác như ví dụ <div>sample</div>với thuộc tính css : display: block.

Bạn cũng có thể sử dụng <pre>. Nội dung của prenó sẽ bị bỏ qua kiểu html. Nói cách khác, nó sẽ hiển thị html thuần với các \nchữ viết thường

— Luke
nguồn