Nuevas líneas en texto dentro de un div

Question

Tengo un pequeño problema relacionado con cuando coloco un texto cargado mediante una llamada ajax.

Tomo el contenido de un área de texto y lo almaceno en mi base de datos y cuando quiero mostrar el texto en un div, no respeta las nuevas líneas, por lo que todo el texto es continuo.

del código siguiente muestran un pequeño ejemplo:

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

Si escribe un texto con algunos nuevas líneas, una vez que se hace clic en el botón, el texto es mostrar en el div y verá que las nuevas líneas no se muestran.

¿Cómo puedo solucionar esto?

Answer 1

Los caracteres de nueva línea no hacen nada al renderizado html. Cambiar esto en sus JS:

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

... a esto:

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

... y va a reemplazar sus nuevas líneas con un salto de línea html adecuado

Answer 2

creo que una mejor manera para lograr esto es agregar

white-space: pre 

o

white-space: pre-wrap 

estilo a su div. ver HTML - Newline char in DIV content editable?

Answer 3

añadir esto a la CSS:

white-space: pre-line