Nuove righe nel testo all'interno di un div

Question

Ho un piccolo problema relativo a quando inserisco un testo caricato tramite una chiamata Ajax.

Prendo il contect da una textarea e lo memorizzo nel mio database e quando voglio mostrare il testo in un div, non rispetta le nuove righe, quindi tutto il testo è continuo.

Il seguente codice mostra un piccolo esempio:

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

Se si digita un testo con alcune nuove linee, una volta che si fa clic sul pulsante, il testo è mostrare in div e vedrà che le nuove linee non sono mostrate.

Come posso risolvere questo?

Answer 1

I caratteri di nuova riga non fanno nulla al rendering html. Modificare questo nel vostro js:

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

... a questo:

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

... e sarà sostituire le nuove righe con un'interruzione corretta linea di html

Answer 2

Penso che un modo migliore per raggiungere questo obiettivo è quello di aggiungere

white-space: pre 

o

white-space: pre-wrap 

stile per il vostro div. vedere HTML - Newline char in DIV content editable?

Answer 3

Aggiungere questo al CSS:

white-space: pre-line