Новые строки в тексте в div

У меня есть небольшая проблема, связанная с тем, когда я помещаю текст, загруженный через вызов ajax.

Я беру contect из текстового поля и сохраняю его в своей базе данных, и когда я хочу показать текст в div, он не уважает новые строки, поэтому весь текст является непрерывным.

Следующий код показывает небольшой пример:

$(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>

Ответы

Ответ 1

Символы новой строки ничего не делают для рендеринга html. Измените это в js:

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

... к этому:

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

... и он заменит ваши строки новой строки правильным перерывом строки html

Ответ 3

Добавьте это в CSS:

white-space: pre-line