Các dòng mới trong văn bản trong một div

Question

Tôi có một vấn đề nhỏ liên quan đến khi tôi đặt văn bản được tải qua cuộc gọi ajax.

Tôi lấy ranh giới từ vùng văn bản và lưu trữ nó trong cơ sở dữ liệu của mình và khi tôi muốn hiển thị văn bản trong div, nó không tôn trọng dòng mới, vì vậy tất cả văn bản liên tục.

Các mã sau đây cho thấy một ví dụ nhỏ:

$(function() { 
 
    $('.buttonA').click(function() { 
 
     $('.message').html($('textarea[name="mensaje"]').val()); 
 
    }); 
 
});

.message { 
 
    width:300px; 
 
    height:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<textarea name="mensaje" class="new_message_textarea" placeholder="enter message..."></textarea> 
 
<button class="buttonA">Enter</button> 
 
<div class="message"></div>

Nếu bạn gõ một số văn bản với một số dòng mới, một khi bạn nhấn vào nút, văn bản là hiển thị vào div và sẽ thấy rằng các dòng mới không hiển thị.

Tôi làm cách nào để giải quyết vấn đề này?

Answer 1

Ký tự dòng mới không làm bất kỳ điều gì để hiển thị html. Thay đổi này trong js của bạn:

$('.message').html($('textarea[name="mensaje"]').val()); 

... như thế này:

$('.message').html($('textarea[name="mensaje"]').val().replace(/\n/g, "<br />")); 

... và nó sẽ thay thế dòng mới của bạn với một break thích dòng html

Answer 2

Tôi nghĩ rằng một cách tốt hơn để đạt được điều này là thêm

white-space: pre 

hoặc

white-space: pre-wrap 

kiểu cho div của bạn. thấy HTML - Newline char in DIV content editable?

Answer 3

Thêm phần này vào CSS:

white-space: pre-line