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 中，并且会看到新行没有显示。

我该如何解决这个问题？

原文由 domoindal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

换行符对 html 渲染没有任何影响。在你的js中改变这个：

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

…对此：

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

…它会用适当的 html 换行符替换你的换行符

原文由 JoeCortopassi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

white-space: pre

要么

white-space: pre-wrap

样式为您的 div 。

请参阅： HTML - DIV 内容中的换行符是否可编辑？

原文由 Chris.Zou 发布，翻译遵循 CC BY-SA 4.0 许可协议