div内のテキストの新しい行

Question

ajax呼び出しで読み込まれたテキストを配置するときに少し問題があります。

私はtextareaからcontectを取り出し、データベースに保存します。divにテキストを表示したいときは、新しい行を尊重しないので、すべてのテキストは連続しています。

次のコードは、小さな例を示しています。あなたには、いくつかの新しい行といくつかのテキストを入力する場合は、ボタンをクリックすると、テキストは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>

をし、新しい行が表示されないことがわかります。

どうすればこの問題を解決できますか？

Answer 1

改行文字は、HTMLレンダリングには何もしません。私はより良い方法を考える

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

を...、それは適切なHTMLの改行と

Answer 2

をあなたの改行を置換する：これに...

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

：あなたのJSでこれを変更しますこれを達成することが

white-space: pre 

または

を追加することです

white-space: pre-wrap 

あなたの部門へのスタイル。 はHTML - Newline char in DIV content editable?

Answer 3

がCSSにこれを追加参照してください。

white-space: pre-line