div中文本中的新行

Question

我有一个小问题,当我通过ajax调用加载文本时.

我从textarea中获取相关内容并将其存储在我的数据库中,当我想在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>

如果您使用一些新行键入一些文本,一旦您单击该按钮,文本将显示在div中,并且将看到未显示新行.

我怎么解决这个问题？

Answer 1

我认为实现这一目标的更好方法是添加

white-space: pre

要么

white-space: pre-wrap

你的div风格.看HTML - DIV内容中的换行符可编辑吗？

Answer 2

将其添加到CSS:

white-space: pre-line

Answer 3

换行符不对html渲染做任何事情.在你的js中改变这个:

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

......对此:

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

...它将用适当的html换行符替换你的换行符